La pseudo-classe :nth-child()

Comprendre comment fonctionne la pseudo-classe :nth-child()

Une nouvelle pseudo-classe dans les CSS 3

Les CSS 3 nous propose de nombreux nouveaux sélecteurs, de nouveaux pseudo-élément et de nouvelles pseudo-classe. Parmi ces dernière nous trouvons la pseudo-classe :nth-child(x) qui permet de cibler les x premiers éléments enfants d'un élément parent. Ces x premiers éléments sont déterminés par l'argument x entre parenthèses.

Nous allons utiliser une liste <ul> et une mise en évidence CSS avec un fond doré :

li:nth-child(x){
background-color: gold;
}

Cibler un enfant

L'argument x peut-être un chiffre : :nth-child(2) permet de cibler deuxième enfant.

Cibler les enfants pairs ou impairs

L'argument x peut-être un mot-clé : :nth-child(odd) permet de cibler les enfants impairs et :nth-child(even) permet de cibler les enfants pairs. Idéal pour avoir des alternances !

Cibler des enfants par calcul

L'argument x peut-être un calcul sous la forme : an+b. n représente une valeur qui commence à 0 et qui est incrémenté par pas de 1. n peut être positif ou négatif.

- :nth-child(n+3) permet de ne pas cibler les deux premiers enfants.
Voilà le calcul :
0+3=3, le troisième enfant,
1+3=4, le quatrième enfant,
2+3=5, le cinquième enfant...

L'affichage :

- :nth-child(-n+3) permet de cibler les trois premiers enfants,
Voilà le calcul :
-0+3=3, le troisième enfant,
-1+3=2, le deuxième enfant,
-2+3=1, le premier enfant...
-2+3=0, aucun enfant,
-2+3=-1, aucun enfant...

L'affichage :

- :nth-child(3n) permet de cibler un enfant sur 3,
Voilà le calcul :
3x0=0, aucun enfant,
3x1=3, le troisième enfant,
3x2=6, le sixième enfant,
3x3=9, le neuvième enfant...

L'affichage :

- :nth-child(3n+1) permet de cibler un enfant sur 3 en commençant par le premier enfant.
Voilà le calcul :
(3x0)+1=1, le premier enfant,
(3x1)+1=4, le quatrième enfant,
(3x2)+1=7, le septième enfant,
(3x3)+1=10, le dixième enfant...

L'affichage :