CSS3 :nth-child()Sélecteurs

Manuel de référence complet des sélecteurs CSS

Exemple

Spécifiez la couleur d'arrière-plan du deuxième élément enfant dans l'élément parent correspondant à chaque élément p :

p:nth-child(2) { background:#ff0000; }

Définition et utilisation

Le sélecteur :nth-child(n) correspond au n-ième élément enfant dans un élément parent, sans restriction quant au type d'élément.

nIl peut s'agir d'un nombre, d'un mot-clé ou d'une formule.

Astuce :Voir aussiSélecteursCe sélecteur correspond au n-ième élément frère du même type.

Syntaxe

element:nth-child(n)

elementest l'élément HTML que vous souhaitez sélectionner.
nest un paramètre, qui peut être un mot-clé (tel queoddoueven), ou une expression (telle que2n+1）。

Les mots-clés odd et even

oddSélectionne les éléments enfants aux positions impaires.
evenSélectionne les éléments enfants aux positions paires.

Prise en charge des navigateurs

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge la propriété.

Sélecteurs
:nth-child()	4.0	9.0	3.5	3.2	9.6

Plus d’exemples

Exemple 1

odd et even sont des mots-clés qui peuvent être utilisés pour faire correspondre des éléments enfants dont l'indice est impair ou pair (l'indice du premier enfant est 1). Ici, nous spécifions deux couleurs d'arrière-plan différentes pour les éléments p impairs et pairs :

p:nth-child(odd) { background:#ff0000; } p:nth-child(even) { background:#0000ff; }

Essayez-le vous-même »

Exemple 2

En utilisant la formule (an + b). Description : a représente la taille d'un cycle, n est un compteur (commençant à 0), et b est un décalage. Ici, nous spécifions une couleur d'arrière-plan pour tous les éléments p dont l'indice est un multiple de 3 :

p:nth-child(3n+0) { background:#ff0000; }