Comment sélectionner le "dernier enfant" avec un nom de classe spécifique en CSS ?

Question

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

Comment puis-je sélectionner le "dernier enfant" avec le nom de la classe : liste ?

<style>
    ul li.list:last-child{background-color:#000;}
</style>

Je sais que l'exemple ci-dessus ne fonctionne pas, mais y a-t-il quelque chose de similaire qui fonctionne ?

IMPORTANT :

a) Je ne peux pas utiliser ul li:nth-child(3) parce qu'il pourrait arriver qu'il se trouve aussi à la quatrième ou cinquième place.

b) Pas de JavaScript.

Answer 1

$('.class')[$(this).length - 1] 

ou

$( "p" ).last().addClass( "selected" );

Answer 2

Je vous suggère de tirer parti du fait que vous pouvez affecter plusieurs classes à un élément comme ceci :

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list last">test3</li>
    <li>test4</li>
</ul>

Le dernier élément a le list comme ses frères et sœurs, mais possède également la classe last que vous pouvez utiliser pour définir toute propriété CSS que vous souhaitez, comme suit :

ul li.list {
    color: #FF0000;
}

ul li.list.last {
    background-color: #000;
}