La pseudo-classe CSS :nth-child

La pseudo-classe CSS :nth-child() permet de cibler un élément selon sa position parmi ses frères. C'est très pratique pour styliser une ligne sur deux, répéter un motif ou viser seulement certains éléments d'une liste.

Qu'est-ce qu'une pseudo-classe CSS ?

Une pseudo-classe permet de sélectionner un élément dans un état ou une situation particulière. Par exemple, un lien survolé peut être ciblé avec :hover, un champ actif avec :focus, et un élément placé à une certaine position avec :nth-child().

Le principe est donc simple : on ne change pas le HTML, on affine juste le ciblage en CSS.

Attention ! Une pseudo-classe s'écrit avec un seul deux-points. La syntaxe correcte est donc :nth-child() et non ::nth-child(). Le double deux-points est réservé aux pseudo-éléments comme ::before ou ::after.

À quoi sert :nth-child ?

La pseudo-classe :nth-child() sert à sélectionner un élément selon sa place dans un groupe. Elle regarde les éléments frères, c'est-à-dire les éléments qui ont le même parent.

Par exemple, dans une liste, vous pouvez cibler le deuxième li, puis le quatrième, puis le sixième. Vous pouvez aussi viser les éléments 1, 4, 7, 10, ou encore les trois premiers seulement.

C'est souvent plus propre que d'ajouter des classes comme ligne-paire, carte-3 ou bloc-special partout dans le HTML.

						
							<ul class="liste-produits">
								<li>Pomme</li>
								<li>Poire</li>
								<li>Banane</li>
								<li>Kiwi</li>
							</ul>
						
					

						
							.liste-produits li:nth-child(2){
								color: #c0392b;
								font-weight: bold;
							}
						
					

Ici, seul le deuxième élément de la liste est ciblé.

odd et even pour sélectionner des éléments pairs ou impairs

Les valeurs les plus simples sont odd et even. Elles permettent de cibler automatiquement les éléments impairs ou pairs.

C'est particulièrement utile pour les tableaux, les listes ou les cartes affichées les unes à la suite des autres.

						
							<ul class="zebra">
								<li>Ligne 1</li>
								<li>Ligne 2</li>
								<li>Ligne 3</li>
								<li>Ligne 4</li>
							</ul>
						
					

						
							.zebra li:nth-child(odd){
								background: #dff3f8;
							}

							.zebra li:nth-child(even){
								background: #f5fbfd;
							}
						
					

Retenez bien que le comptage commence à 1, pas à 0. Le premier élément est donc impair, le deuxième est pair, et ainsi de suite.

Sélection avancée avec une fonction affine de type An+B

La vraie force de :nth-child() apparaît quand on utilise une formule du type An+B. Cela permet de créer un motif régulier.

Dans cette écriture :

• A correspond au rythme,
• n représente une suite de nombres,
• B correspond au décalage de départ.

Par exemple, 3n cible le 3e, le 6e, le 9e, puis tous les multiples de 3. De son côté, 3n+1 cible le 1er, le 4e, le 7e, le 10e, etc.

				
					li:nth-child(3n){
						color: #007890;
					}

					li:nth-child(3n+1){
						font-weight: bold;
					}

					li:nth-child(-n+3){
						text-decoration: underline;
					}
				
			

Le cas -n+3 est très utile lui aussi. Il permet de sélectionner les trois premiers éléments. Vous pouvez donc vous en servir pour mettre en avant un top 3, les premières cartes d'une grille ou les premières étapes d'une liste.

On peut donc créer des motifs précis sans toucher au HTML.

Passer un sélecteur en argument avec of

Il existe une forme plus avancée de la syntaxe : :nth-child(An+B of sélecteur). Elle permet de ne compter que certains éléments parmi les frères.

Imaginons une liste où certains éléments ont la classe .important. Si vous écrivez :nth-child(2), vous ciblez simplement le deuxième enfant, peu importe sa classe. En revanche, avec :nth-child(2 of .important), vous ciblez le deuxième élément important.

						
							<ul class="alertes">
								<li>Info</li>
								<li class="important">Alerte 1</li>
								<li>Info</li>
								<li class="important">Alerte 2</li>
								<li class="important">Alerte 3</li>
							</ul>
						
					

						
							.alertes li:nth-child(2 of .important){
								background: #ffe9a8;
							}
						
					

Cette syntaxe est très pratique quand la liste contient plusieurs types d'éléments mélangés et que vous voulez compter seulement une partie d'entre eux.

Cas pratiques d'utilisation de :nth-child

En pratique, :nth-child() sert souvent dans des situations très concrètes.

• alterner les couleurs d'un tableau ou d'une liste,
• supprimer la marge droite d'une carte sur trois dans une grille,
• mettre en avant les premiers éléments d'un groupe,
• ajouter un style différent à un motif répétitif.

Voici un exemple classique avec une grille de cartes. Tous les troisièmes éléments reçoivent un style particulier :

						
							<section class="grille">
								<article>Carte 1</article>
								<article>Carte 2</article>
								<article>Carte 3</article>
								<article>Carte 4</article>
								<article>Carte 5</article>
								<article>Carte 6</article>
							</section>
						
					

						
							.grille article:nth-child(3n){
								border: 2px solid #007890;
							}
						
					

Vous pouvez aussi combiner :nth-child() avec un sélecteur plus précis, par exemple .grille article:nth-child(3n) ou table tr:nth-child(even).

Dessiner un damier avec :nth-child()

Un autre cas concret de design consiste à créer un damier. L'idée est de dessiner une grille de cases, puis de colorer seulement certaines positions avec :nth-child().

Pour que le motif soit lisible, le plus simple est de structurer le HTML en lignes. Ensuite, on colore les cases paires sur les lignes impaires, puis les cases impaires sur les lignes paires.

						
							<div class="damier">
								<div class="ligne">
									<span></span>
									<span></span>
									<span></span>
									<span></span>
								</div>
								<div class="ligne">
									<span></span>
									<span></span>
									<span></span>
									<span></span>
								</div>
								<div class="ligne">
									<span></span>
									<span></span>
									<span></span>
									<span></span>
								</div>
								<div class="ligne">
									<span></span>
									<span></span>
									<span></span>
									<span></span>
								</div>
							</div>
						
					

						
							.damier .ligne{
								display: flex;
							}

							.damier .ligne span{
								width: 40px;
								height: 40px;
								background: #f3e7c9;
							}

							.damier .ligne:nth-child(odd) span:nth-child(even),
							.damier .ligne:nth-child(even) span:nth-child(odd){
								background: #6b4f2a;
							}
						
					

Le motif alterne d'une ligne à l'autre pour dessiner un vrai damier.

Le point important à retenir est le suivant : on compte toujours les enfants d'un même parent. Si le parent change, le comptage repart de zéro.