Pseudo-classe :nth-child() de CSS

Définition et utilisation

CSS :nth-child(n)}} pseudo-classe pour correspondre à l'élément qui est le n élément fils.

Ce pseudo-classe correspond aux éléments en fonction de leur index dans la liste des éléments fils de l'élément parent.

n peut être un nombre/index, une clé (impair ou pair) ou une formule (comme an + b)

Astuce :Voir :nth-of-type() pseudo-classe pour sélectionner comme élément fils de l'élément parent,du même type (nom de balise)du n un élément fils.

Exemple

Exemple 1

Comment l'utiliser :nth-child() Pseudo-classe :

/* Sélectionne le quatrième élément de tout groupe d'éléments frères */
:nth-child(4) {
  background-color: yellow;
}
/* Sélectionne le deuxième élément parmi les éléments frères div */
div:nth-child(2) {
  background-color: red;
}
/* Sélectionne le deuxième élément li de la liste */
li:nth-child(2) {
  background-color: lightgreen;
}

Essayez-le vous-même

Exemple 2

impair et pair est une clé, utilisable pour correspondre aux éléments d'index impair ou pair (l'index du premier élément fils est 1).

Ici, nous attribuons des couleurs de fond différentes aux éléments <p> d'index impair et pair :

p:nth-child(odd) {
  background-color: red;
}
p:nth-child(even) {
  background: lightgreen;
}

Essayez-le vous-même

Exemple 3

en utilisant l'équation (an + b) Description :a représente un pas d'entier, n étant tous les entiers non négatifs à partir de 0,b est un décalage d'entier.

Ici, nous attribuons la couleur de fond aux éléments <p> dont l'index est un multiple de 3 (ce qui sélectionne le troisième, le sixième, le neuvième, etc.) :

p:nth-child(3n+1) {
  background-color: red;
}

Essayez-le vous-même

Exemple 4

Ici, nous attribuons la couleur de fond aux éléments <p> dont l'index est un multiple de 3. Ensuite, nous soustrayons 1 (ce qui sélectionne le premier, le quatrième, le septième, etc.) :

p:nth-child(3n-1) {
  background-color: red;
}

Essayez-le vous-même

Grammaire CSS

:nth-child(index | impair | pair | an+b) {
  déclarations css;
}

Détails techniques

Support du navigateur

Les nombres dans le tableau indiquent la première version de navigateur qui prend en charge ce pseudo-classe.