Pseudo-classe nth-last-child

La pseudo-classe nth-last-child sélectionne un élément qui est le n-ième enfant de son parent, en comptant à partir de la fin. Elle se comporte de manière analogue à nth-child, mais le décompte se fait à partir de la fin.

Syntaxe

sélecteur:nth-last-child(nombre | odd | even | expression) {
	
}

Valeurs

Valeur	Description
nombre	Un nombre positif à partir de `1`. Spécifie le numéro de l'élément auquel nous voulons accéder. La numérotation des éléments commence à `1`.
`odd`	Les éléments impairs.
`even`	Les éléments pairs.
expression	Il est possible de composer des expressions spéciales avec la lettre n, qui représente tous les nombres entiers à partir de zéro (et non pas un) jusqu'à l'infini. Ainsi, `2n` signifie tous les nombres pairs (à partir du deuxième). Comment comprendre cela ? Nous substituons dans `n` séquentiellement les nombres à partir de `0` et ainsi de suite : si n = 0, alors 2n donne 0 - un tel élément n'existe pas (la numérotation des éléments commence à 1), si n = 1, alors 2n donne 2 - le deuxième élément, si n = 2, 2n donne 4 - le quatrième élément. Si on écrit 3n - ce sera chaque troisième élément (en commençant par le troisième), et ainsi de suite.

Exemple

Dans cet exemple, nous allons mettre en rouge le li qui est le 4-ième à partir de la fin des enfants de son parent :

<ul>
	<li>élément de liste</li>
	<li>élément de liste</li>
	<li>élément de liste</li>
	<li>élément de liste</li>
	<li>élément de liste</li>
</ul>

li:nth-last-child(4) {
	color: red;
}

Exemple

Maintenant, nous allons mettre en rouge tous les li pairs en partant de la fin :

<ul>
	<li>élément de liste</li>
	<li>élément de liste</li>
	<li>élément de liste</li>
	<li>élément de liste</li>
	<li>élément de liste</li>
</ul>

li:nth-last-child(even) {
	color: red;
}

Exemple

Maintenant, nous allons mettre en rouge tous les éléments impairs en partant de la fin li :

<ul>
	<li>élément de liste</li>
	<li>élément de liste</li>
	<li>élément de liste</li>
	<li>élément de liste</li>
	<li>élément de liste</li>
</ul>

li:nth-last-child(odd) {
	color: red;
}

Exemple

Maintenant, nous allons mettre en rouge chaque troisième élément li en partant de la fin :

<ul>
	<li>élément de liste</li>
	<li>élément de liste</li>
	<li>élément de liste</li>
	<li>élément de liste</li>
	<li>élément de liste</li>
</ul>

li:nth-last-child(3n) {
	color: red;
}