La pseudo-classe :nth-child(an+b) permet de cibler un élément qui possède an+b-1 éléments voisins (au même niveau) avant lui dans l'arbre du document pour des valeurs entières n et qui possède un élément parent. Autrement dit, un sélecteur utilisant cette pseudo-classe permettra de cibler les éléments fils d'un élément dont les positions correspondent au motif an+b. Pour CSS3, pour que l'élément soit ciblé, il faut qu'il ait un élément parent. En CSS4, cette restriction a été levée.

Illustrons cela avec quelques exemples :

  • 1n+0 ou n ciblera chaque élément fils. n ne cible aucun élément pour le navigateur Android jusqu'à la version 4.3 alors qu'1n fonctionne. 1n est synonyme de 1n+0 et les deux peuvent donc être utilisés de façon équivalente.
  • 2n+0 ou 2n ciblera les éléments fils 2, 4, 6, 8, etc. On pourra utiliser le mot-clé even à la place de cette expression.
  • 2n+1 ciblera les éléments fils 1, 3, 5, 7, etc. On pourra utiliser le mot-clé odd à la place de cette expression.
  • 3n+4 permettra de cibler les éléments fils 4, 7, 10, 13, etc.

Les valeurs des coefficients a et b doivent être des entiers et l'indice du premier élément fils commence à 1. Autrement dit, cette pseudo-classe permettra de cibler les éléments fils dont l'indice appartient à l'ensemble { an + b; n = 0, 1, 2, ... }.

Cette pseudo-classe pourra ainsi être utilisée pour mettre en forme certaines lignes d'un tableau.

Syntaxe

:nth-child( <an-plus-b> [ of <selector># ]? ) { style properties }


<an-plus-b> = An+B | even | odd

Exemples

Exemples de sélecteurs

tr:nth-child(2n+1)
Permettra de cibler les lignes impaires d'un tableau.
tr:nth-child(odd)
Permettra de cibler les lignes impaires d'un tableau.
tr:nth-child(2n)
Permettra de cibler les lignes paires d'un tableau.
tr:nth-child(even)
Permettra de cibler les lignes paires d'un tableau.
span:nth-child(0n+1)
Permettra de cibler un élément <span> qui est le premier fils de son parent. Cela aura le même effet que la pseudo-classe :first-child.
span:nth-child(1)
Synonyme à l'exemple précédent.
span:nth-child(-n+3)
Permettra de cibler un élément si celui-ci fait partie des trois premiers fils d'un parent et que c'est également un élément span.

Exemple démonstratif

CSS

html {
  font-family: sans-serif;
}

span, div em {
  padding: 10px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}
    
.premier span:nth-child(2n+1),
.deuxieme span:nth-child(2n+1),
.troisieme span:nth-of-type(2n+1) {
  background-color: lime;
}

HTML

<p>
  <code>span:nth-child(2n+1)</code>, 
  <em>sans</em> un <code>&lt;em&gt;</code>
  parmi les éléments. Les éléments fils 1, 3,
  5 et 7 sont sélectionnés.
</p>

<div class="premier">
  <span>Ce span est sélectionné !</span>
  <span>Pas ce span ci. :(</span>
  <span>Celui-ci ?</span>
  <span>Celui-là ?</span>
  <span>Un autre exemple</span>
  <span>Et encore un</span>
  <span>Puis un dernier</span>
</div>

<p>
  <code>span:nth-child(2n+1)</code>,
  <em>avec</em> un élément <code>&lt;em&gt;</code>
  parmi les fils. Les éléments fils 1, 5,
  et 7 sont sélectionnés. 3 est compté
  mais n'est pas ciblé car ce n'est pas
  <code>&lt;span&gt;</code>.
</p>

<div class="deuxieme">
  <span>Ce span est sélectionné !</span>
  <span>Pas ce span ci. :(</span>
  <em>Ici on a un em.</em>
  <span>Qu'en est-il de celui-ci ?</span>
  <span>De celui-là ?</span>
  <span>Voici un autre exemple</span>
  <span>Et encore un</span>
  <span>Puis un dernier</span>
</div>

<p>
  <code>span:nth-of-type(2n+1)</code>, 
  <em>avec</em> un <code>&lt;em&gt;</code>
  parmi les éléments fils. Les éléments fils
  1, 4, 6 et 8 sont sélectionnés. 3 n'est pas 
  compté ni ciblé car c'est un <code>&lt;em&gt;</code>, 
  et pas un <code>&lt;span&gt;</code> et
  <code>nth-of-type</code> ne sélectionne que les 
  fils de ce type. Ce <code>&lt;em&gt;</code> est
  sauté et est ignoré.
</p>
 
<div class="troisieme">
  <span>Ce span est sélectionné !</span>
  <span>Pas ce span ci. :(</span>
  <em>Ici on a un em.</em>
  <span>Qu'en est-il de celui-ci ?</span>
  <span>De celui-là ?</span>
  <span>Voici un autre exemple</span>
  <span>Et encore un</span>
  <span>Puis un dernier</span>
</div>

Résultat

Spécifications

Spécification État Commentaires
Selectors Level 4
La définition de ':nth-child' dans cette spécification.
Version de travail Les éléments ciblés peuvent ne pas avoir d'élément parent.
Selectors Level 3
La définition de ':nth-child' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1 (Oui) 3.5 (1.9.1) 9.0 9.5 3.1
Pas d'élément parent nécessaire 57 ? ? ? 44 ?
Fonctionnalité Webview Android Chrome pour Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) (Oui) (Oui) 1.0 (1.9.1) 9.0 9.5 3.1
Pas d'élément parent nécessaire 57 57 ? ? ? 44 ?

[1] Opera ne gère pas l'insertion dynamique d'éléments.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Dernière mise à jour par : SphinxKnight,