:nth-child()
Sélectionne des éléments selon leur position parmi leurs frères : un sur deux, un sur trois, les trois premiers ou tous à partir du septième.
Exemple
#tbody tr:nth-child(even) {
background: #18181b;
}<style>
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 6px 10px; text-align: left; }
th + th, td + td { text-align: right; }
thead { color: #a1a1aa; }
</style>
<table>
<thead><tr><th>Joueur</th><th>EXP</th></tr></thead>
<tbody>
<tr><td>Léa</td><td>1 240</td></tr>
<tr><td>Lucas</td><td>1 180</td></tr>
<tr><td>Emma</td><td>990</td></tr>
<tr><td>Hugo</td><td>870</td></tr>
</tbody>
</table>Définition et utilisation
#La pseudo-classe :nth-child() numérote tous les enfants du parent, en commençant à 1, et sélectionne ceux dont le numéro correspond à l’argument. L’argument peut être un nombre précis (3), le mot odd (impair) ou even (pair), ou une formule An+B.
La formule An+B se lit ainsi : le navigateur remplace n successivement par 0, 1, 2, 3… et sélectionne les éléments dont le numéro obtenu correspond. 2n+1 donne 1, 3, 5, soit la même chose que odd ; 3n donne 3, 6, 9 ; et -n+3 donne 3, 2, 1, c’est-à-dire les trois premiers éléments. Les résultats inférieurs à 1 sont ignorés.
Comme :first-child, la pseudo-classe compte tous les éléments du parent, quelle que soit leur balise ou leur classe. Le sélecteur .card:nth-child(2) sélectionne le deuxième enfant s’il a la classe card, pas la deuxième carte. La syntaxe :nth-child(2 of .card) résout ce problème : les éléments correspondant au sélecteur après of sont d’abord isolés, puis seulement numérotés. Elle fonctionne dans tous les grands navigateurs depuis 2023.
Pour compter à partir de la fin, il existe :nth-last-child(), et pour ne compter que les éléments de même balise, :nth-of-type().
Syntaxe
#:nth-child( <nombre> | odd | even | An+B [of <sélecteur>]? )Arguments
#1, 3, 5, 7, 9
Les éléments impairs. Le classique des rayures alternées dans les tableaux et les listes.2, 4, 6, 8, 10
Les éléments pairs, soit la même chose que la formule2n.3
Exactement le troisième enfant du parent.3, 6, 9
Un élément sur trois, c’est-à-dire les numéros multiples de trois.1, 4, 7, 10
Un sur trois, en commençant par le premier. Dans une grille à trois colonnes, c’est toute la première colonne.1, 2, 3
Les trois premiers éléments. Pour n = 0, 1, 2 on obtient 3, 2, 1, et les résultats suivants, inférieurs à 1, sont ignorés.7, 8, 9, 10
Du septième élément jusqu’à la toute fin, quel qu’en soit le nombre.le deuxième parmi .hot
Les éléments avec la classehot(bordure jaune) sont d’abord isolés, puis numérotés à partir de 1. L’élément sélectionné est le 4, le deuxième d’entre eux.
Arguments en pratique
#odd
span:nth-child(odd) { background: #7c3aed; color: #fff; }even
2n.span:nth-child(even) { background: #7c3aed; color: #fff; }3
span:nth-child(3) { background: #7c3aed; color: #fff; }3n
span:nth-child(3n) { background: #7c3aed; color: #fff; }3n+1
span:nth-child(3n+1) { background: #7c3aed; color: #fff; }-n+3
span:nth-child(-n+3) { background: #7c3aed; color: #fff; }n+7
span:nth-child(n+7) { background: #7c3aed; color: #fff; }2 of .hot
hot (bordure jaune) sont d’abord isolés, puis numérotés à partir de 1. L’élément sélectionné est le 4, le deuxième d’entre eux.span:nth-child(2 of .hot) { background: #7c3aed; color: #fff; }Plus d’exemples
#.ranking li:nth-child(-n+3) {
color: #fbbf24;
font-weight: 700;
}<ol class="ranking stage" style="display: grid; gap: 4px; margin: 0; padding: 10px 10px 10px 34px; color: #a1a1aa;">
<li>Léa, 1 240 EXP</li>
<li>Lucas, 1 180 EXP</li>
<li>Emma, 990 EXP</li>
<li>Hugo, 870 EXP</li>
<li>Chloé, 640 EXP</li>
</ol>La formule -n+3 sélectionne toujours les trois premières places, quelle que soit la longueur de la liste.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- La formule se vérifie facilement de tête : remplacez
npar 0, 1, 2, 3 et regardez les numéros obtenus. - N’oubliez pas que tous les enfants du parent sont comptés. Si différents éléments se mélangent à l’intérieur, utilisez
:nth-of-type()ou la syntaxeof S. - Les rayures dans les tableaux (
tr:nth-child(even)) sont une utilisation classique : elles aident l’œil à suivre de longues lignes.
Entrées associées
#- :nth-child() vs :nth-of-type()nth-child() compte tous les éléments du parent, quelle que soit la balise. nth-of-type() compte seulement les frères avec la même balise que le sélecteur choisi.
- :nth-of-type()Sélectionne des éléments selon leur position parmi les frères portant la même balise, par exemple une image sur deux ou le troisième paragraphe.
- :first-childCorrespond à l’élément qui est le premier enfant de son parent.
- :last-childCorrespond à l’élément qui est le dernier enfant de son parent.
- :not()Sélectionne les éléments qui ne correspondent à aucun des sélecteurs fournis, ni à aucun de la liste.
- :is()Fait correspondre l’élément à n’importe quel sélecteur de la liste. Raccourcit les longs sélecteurs répétitifs en une seule écriture.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.