:nth-child

Résumé

La pseudo-classe CSS :nth-child(an+b) cible un élément qui a an+b-1 nœuds frères, pour une valeur de n positive ou égale à 0, et qui a un élément parent.

Ceci peut être décrit de manière plus claire : l'élément ciblé, est le bème enfant d'un élément, après que tous ses enfants aient été découpés en goupe de a éléments chacun.

Les valeurs a et b doivent être des nombres entiers, et l'index du premier enfant d'un élément est 1.

En d'autre mots, cette pseudo-classe cible tous les enfants dont l'index tombe dans le set { an + b; n = 0, 1, 2, ... }.

Parmi différents usages, ceci permet au sélecteur de cibler une ligne sur deux dans un tableau.

Syntaxe

element:nth-child(an + b) { propriétés CSS }

Exemples

Exemples de sélecteurs

tr:nth-child(2n+1)
Représente les lignes impaires d'un tableau HTML.
tr:nth-child(odd)
Représente les lignes impaires d'un tableau HTML.
tr:nth-child(2n)
Représente les lignes paires d'un tableau HTML.
tr:nth-child(even)
Représente les lignes paires d'un tableau HTML.
span:nth-child(0n+1)
Représente un élément span qui est le premier enfant de son l'élément parent, c'est comme le sélecteur :first-child.
span:nth-child(1)
Équivalent de ce qu'il y a au-dessus.
span:nth-child(-n+3)
Les trois premiers élément span.

Exemple d'utilisation :

Le CSS ...

span:nth-child(2n+1) {
  background-color: lime;
}

... avec les balises HTML suivantes ...

<div>
  <span>Ce span est vert!</span>
  <span>Ce span ne l'est pas. :(</span>
  <span>Mais celui-ci oui!</span>
  <span>Malheureusement celui-là ne l'est pas...</span>
</div>

... doit donner ça :

Spécifications

Spécification Statut Commentaire
Selectors Level 4
La définition de ':nth-child' dans cette spécification.
Version de travail Aucun changement.
Selectors Level 3
La définition de ':nth-child' dans cette spécification.
Recommendation Première définition.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1.0 3.5 (1.9.1) 9.0 9.5 3.1
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base 2.1 1.0 (1.9.1) 9.0 9.5 3.1

Notes

Opera ne peut pas gérer l'insertion dynamique d'élément.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : clementpolito, Dexter_Deter, teoli, tregagnon, FredB, DavidWalsh, the prisoner
Dernière mise à jour par : clementpolito,