La pseudo-classe CSS :nth-child()
La pseudo-classe CSS :nth-child() sélectionne des éléments selon leur position parmi leurs frères. Exemples pratiques inclus.
La pseudo-classe :nth-child() sélectionne des éléments en fonction de leur position au sein d'un groupe de frères. Vous lui passez un nombre, un mot-clé ou une formule, et elle sélectionne le ou les enfants correspondants — vous permettant de styliser une ligne sur deux dans un tableau, les trois premiers éléments d'une liste, ou tout motif répétitif sans ajouter de classes supplémentaires à votre HTML.
Cette page présente les arguments qu'elle accepte (odd, even et la formule An+B), propose des exemples exécutables et explique le point de confusion le plus courant : la différence entre :nth-child() et :nth-of-type().
Syntaxe
selector:nth-child(argument) {
/* declarations */
}L'argument peut être l'un des trois éléments suivants :
- Un nombre simple, comme
:nth-child(3)— sélectionne le troisième enfant. - Un mot-clé,
oddoueven. - Une formule
An+B, comme:nth-child(3n+1).
Le comptage commence toujours à 1 pour le premier enfant (et non à 0), et il compte tous les frères, pas seulement ceux correspondant au type de sélecteur — ce détail est à l'origine de la plupart des surprises (voir nth-child vs. nth-of-type).
Valeurs par mot-clé
odd
Sélectionne les éléments en position impaire (1, 3, 5, 7, …). C'est un raccourci pour la formule 2n+1.
even
Sélectionne les éléments en position paire (2, 4, 6, 8, …). C'est un raccourci pour la formule 2n.
odd et even sont les outils privilégiés pour créer un effet « zèbre » sur les lignes de tableau ou alterner les couleurs des éléments de liste.
Notation fonctionnelle : An+B
La formule An+B sélectionne chaque élément dont la position la satisfait, où n parcourt 0, 1, 2, 3, … :
Aest la taille du cycle (nombre d'éléments entre deux correspondances).Best le décalage (point de départ du cycle).
Pour :nth-child(3n+1) : en substituant n = 0, 1, 2, …, on obtient les positions 1, 4, 7, 10, … — un élément sur trois à partir du premier.
Autres formules utiles :
| Formule | Positions sélectionnées | Signification |
|---|---|---|
:nth-child(2n) | 2, 4, 6, … | Identique à even |
:nth-child(2n+1) | 1, 3, 5, … | Identique à odd |
:nth-child(3) | 3 uniquement | Un seul élément fixe |
:nth-child(n+4) | 4, 5, 6, … | Tout à partir du 4e élément |
:nth-child(-n+3) | 1, 2, 3 | Seulement les trois premiers |
A et B doivent être des entiers. Un A négatif compte à rebours, c'est ainsi que -n+3 sélectionne uniquement les trois premiers enfants.
Version
Exemples
Sélectionner un seul élément
Exemple de code :nth-child()
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-child(3) {
background: #ccc;
}
</style>
</head>
<body>
<h2>:nth-child selector example</h2>
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>
</body>
</html>Seul le troisième <p> reçoit un fond gris.
Utiliser les mots-clés « odd » et « even »
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-child(odd) {
background: #1c87c9;
color: #eeeeee;
}
p:nth-child(even) {
background: #666666;
color: #eeeeee;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>Utiliser une formule An+B
Cet exemple utilise :nth-child(3n) pour mettre en surbrillance chaque troisième élément de liste :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:nth-child(3n) {
background: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</body>
</html>Les éléments 3 et 6 sont mis en surbrillance, car 3n donne 3 et 6.
nth-child vs. nth-of-type
C'est le piège dans lequel tombent la plupart des développeurs. :nth-child() compte tous les frères puis vérifie si l'élément correspondant est également du bon type. Elle ne compte pas « le nième élément de ce type ».
Considérons ce balisage :
<div>
<h2>Heading</h2>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>Ici, p:nth-child(2) sélectionne le premier <p> — car ce <p> occupe la position enfant 2 (le <h2> est en position 1). Écrire p:nth-child(1) ne correspondrait à rien, puisque la position 1 est le titre, pas un paragraphe.
Si vous voulez « le deuxième paragraphe quel que soit ce qui le précède », utilisez plutôt :nth-of-type(), qui ne compte que les éléments du même type.
Sélecteurs associés
:nth-of-type()— comme:nth-child()mais ne compte que les frères du même type d'élément.:nth-last-child()— même syntaxe de formule, mais compte à partir du dernier frère vers le premier.:first-childet:last-child— raccourcis pour le premier et le dernier frère.- CSS Selectors — vue d'ensemble de tous les types de sélecteurs.