Pseudo-classe nth-child

La pseudo-classe nth-child sélectionne un élément qui est le n-ième enfant de son parent.

Syntaxe

sélecteur:nth-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`	Éléments impairs.
`even`	É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 donnera 0 - un tel élément n'existe pas (la numérotation des éléments commence à 1), si n = 1, alors 2n donnera 2 - le deuxième élément, si n = 2, 2n donne 4 - le quatrième élément. Si nous écrivons 3n - ce sera chaque troisième élément (à partir du troisième), et ainsi de suite.

Exemple

Dans cet exemple, nous mettrons en rouge le li qui est le 4-ième enfant 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-child(4) {
	color: red;
}

Exemple

Maintenant, nous mettrons en rouge tous les li pairs :

<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-child(even) {
	color: red;
}

Exemple

Maintenant, nous mettrons en rouge tous les li impairs :

<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-child(odd) {
	color: red;
}

Exemple

Maintenant, nous mettrons en rouge chaque troisième li (à partir de la troisième) :

<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-child(3n) {
	color: red;
}

Exemple

Il est possible de spécifier une plage d'éléments dans le sélecteur. Supposons que vous ayez une liste de 20 éléments et que vous deviez sélectionner les éléments du 7 au 14 inclus. Cela peut être fait comme ceci :

<ol>
	<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>
	<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>
	<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>
	<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>
</ol>

li:nth-child(n+7):nth-child(-n+14) {
	color: red;
}