CSS: last-dziecko w wybór podzbioru

Question

zakładając Mam strukturę jak ten (i nie może go zmodyfikować):

<ul> 
    <li class="common"> <p>First A</p> </li> 
    <li class="common"> <p>Second A</p> </li> 
    <li class="common"> <p>Third A</p> </li> 
    <li class="common"> <p><b>SELECT ME</b></p> </li> 
    <li> <p>First B</p> </li> 
    <li> <p>Second B</p> </li> 
    <li> <p>...</p> </li> 
</ul> 

Czy istnieje sposób wybierz ostatni element z klasą "pospolity"? (W tym przypadku element czwarty)

Najpierw próbowałem wybierając podzbiór z:

.common{ 
    background: red; 
} 

i to działało poprawnie. Więc próbowałem wybrać ostatnie dziecko z nich, z:

.common:last-child{ 
    background: green; 
} 

, ale nie szczęścia. Chciałbym również uniknąć dodania klasy dla tego elementu.

Jsfiddle

EDIT: I uproszczone klas i selektorów aby odkurzacz

Answer 1

Czy istnieje sposób wybierz ostatni element z klasą "wspólne"?

Nie, bez selektora CSS bez modyfikowania kodu HTML.

Answer 2

Można użyć JavaScript lub jQuery

$('custom').prev().css('color', 'red'); 

Answer 3

Jeśli nie na trasie JS można zrobić to

$('li.common.custom').first().prev('.common').css('background','yellow'); 

Znajduje pierwszy element, który ma zarówno .Pokój dzienny i .custom klas i następnie przechodzi do poprzedniego elementu. Więc technicznie ostatni element, który ma tylko .Pokój dzienny

https://jsfiddle.net/89z20341/

Czy struktura zamiar zatrzymać się dokładnie tak, jak zostały zakodowane go? np. z pogrubionymi znacznikami na elemencie, który chcesz wybrać?

jeśli tak można po prostu zrobić to

.common p b{ 
background: green; 
display:block; 

}

http://jsfiddle.net/seLm589s/4/

Answer 4

co

.common:last-of-type { 
 
    background: green; 
 
}