Sélecteur :NTH-CHILD
Rôle
Le sélecteur nth-child est une pseudo-classe désigné par la syntaxe :nth-child(n) qui permet de cibler chaque élément qui est le n-ième enfant de son parent.
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-child(3) ne signifie pas le troisième li du parent mais que le troisième enfant du parent 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 est rouge.
li:nth-child(2){
color: red;
}
<ul>
<li>liste 1</li>
<li>liste 2</li>
<li>liste 3</li>
</ul>
Résultat
un mot-clé : even ou odd.
Le sélecteur nth-child(even) représente les enfants dont l’indice est pair et nth-child(odd) représente les enfants dont l’indice est impair.
Dans l’exemple ci-dessous, les li de rang impair sont rouges et les li de rang pair sont verts.
li:nth-child(odd){
color: red;
}
li:nth-child(even){
color: green;
}
<ul>
<li>liste 1</li>
<li>liste 2</li>
<li>liste 3</li>
<li>liste 4</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 1e, le 3e, le 5, le 7… li de chaque ul.
li:nth-child(2n+1){
color: red;
}
<ul>
<li>liste 1</li>
<li>liste 2</li>
<li>liste 3</li>
<li>liste 4</li>
<li>liste 1</li>
<li>liste 2</li>
<li>liste 3</li>
<li>liste 4</li>
</ul>
Résultat
Version : CSS3
Compatibilité
Le sélecteur nth-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-of-type(n)
:nth-last-child(n)
:nth-last-of-type(n)
only-child
:only-of-type
