web-dev-qa-db-fra.com

CSS:: dernier enfant sur l'élément de liste

Si un élément ul a plusieurs éléments avec plusieurs classes, est-il possible d'obtenir le dernier élément d'une classe spécifique en utilisant:

Par exemple, considérez ce qui suit: 

<ul class="test">
    <li class="one">
    <li class="one">
    <li class="one">
    <li class="two">
    <li class="two">
</ul>

Je veux ajouter du style à la dernière li ayant la classe "un" (ie troisième dans la liste).

J'ai essayé de suivre et ça ne marche pas.

ul.test li.one:last-child
csshtml-listscss-selectors
10
user1355300

Ce n'est pas possible encore .

  • :last-child sélectionne le dernier enfant, quel que soit le nom de la balise, etc.
  • L'alternative possible, :last-of-type sélectionne la dernière occurrence d'un tag . Il ignore le nom de la classe, etc.

Votre seule option consiste à ajouter un nom de classe spécifique à cet élément ou à utiliser JavaScript pour ajouter ce nom de classe.

17
Rob W

Au lieu de donner la classe à chaque li, vous pouvez choisir un nième enfant, auquel vous pouvez attribuer le style par numéro de li.

Si vous voulez donner le css séparé pour votre 3ème li, vous devez écrire

li:nth-child(3) {
    color: green;   
}
3
Sowmya

Vous pouvez le faire en utilisant jquery: http://jsfiddle.net/surendraVsingh/HyAhL/2/

Code Jquery: 

var n = $('.one').length;
$('.one').eq(n-1).css('color', 'red');
1
SVS