Sélecteur :NTH-LAST-CHILD
Rôle
Le sélecteur nth-last-child est une pseudo-classe désigné par la syntaxe :nth-last-child(n) qui permet de cibler chaque élément qui est le n-ième enfant de son parent, à compter du dernier enfant.
Note : assurez vous que l’élément sur lequel s’applique le sélecteur est bien le n-ième enfant de son parent. Par exemple, li:nth-last-child(3) ne signifie pas le troisième li du parent, à compter du dernier, mais que le troisième enfant du parent, à compter du dernier est bien un li.
La valeur (n) peut prendre plusieurs valeurs :
* un nombre qui représente le n-ième enfant. Dans l’exemple ci-dessous, le deuxième li en partant du dernier est rouge.
li:nth-last-child(2){
color: red;
}
<ul>
<li>liste 1</li>
<li>liste 2</li>
<li>liste 3</li>
<li>liste 4</li>
<li>liste 5</li>
</ul>
Résultat
* un mot-clé : even ou odd.
Le sélecteur nth-last-child(even) représente les enfants dont l’indice à partir du dernier est pair et nth-last-child(odd) représente les enfants dont l’indice à partir du dernier est impair.
Dans l’exemple ci-dessous, les li de rang impair, à partir du dernier enfant sont rouges et les li de rang pair sont verts.
li:nth-last-child(odd){
color: red;
}
li:nth-last-child(even){
color: green;
}
<ul>
<li>liste 1</li>
<li>liste 2</li>
<li>liste 3</li>
<li>liste 4</li>
<li>liste 5</li>
</ul>
Résultat
* une formule : an + b. La valeur ‘a’ représente un coefficient (que vous devez définir), ‘n’ est le compteur (commence par 0), et b est une valeur de décalage (que vous devez définir).
Dans l’exemple ci-dessous, on cible le 7e, le 5e, le 3e, le 1e… li de ul à partir du dernier enfant.
li:nth-last-child(2n+1){
color: red;
}
<ul>
<li>liste 1</li>
<li>liste 2</li>
<li>liste 3</li>
<li>liste 4</li>
<li>liste 5</li>
<li>liste 6</li>
<li>liste 7</li>
</ul>
Résultat
Version : CSS3
Compatibilité
Le sélecteur nth-last-child est pris en charge par tous les principaux navigateurs.
A partir d’Internet Explorer 9.
A voir aussi
:first-child
:first-of-type
:last-child
:last-of-type
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
only-child
:only-of-type
