:nth-child

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

La pseudo-classe :nth-child() permet de cibler les éléments en se basant sur l'indice des éléments dans la liste des enfants de leur parent. Autrement dit, un sélecteur utilisant cette pseudo-classe ciblera les éléments selon leur position parmi leurs voisins appartenant à un même parent.

Exemple interactif

p {
  font-weight: bold;
}

li:nth-child(-n + 3) {
  border: 2px solid orange;
  margin-bottom: 1px;
}

li:nth-child(even) {
  background-color: lightyellow;
}

<p>Track &amp; field champions:</p>
<ul>
  <li>Adhemar da Silva</li>
  <li>Wang Junxia</li>
  <li>Wilma Rudolph</li>
  <li>Babe Didrikson-Zaharias</li>
  <li>Betty Cuthbert</li>
  <li>Fanny Blankers-Koen</li>
  <li>Florence Griffith-Joyner</li>
  <li>Irena Szewinska</li>
  <li>Jackie Joyner-Kersee</li>
  <li>Shirley Strickland</li>
  <li>Carl Lewis</li>
  <li>Emil Zatopek</li>
  <li>Haile Gebrselassie</li>
  <li>Jesse Owens</li>
  <li>Jim Thorpe</li>
  <li>Paavo Nurmi</li>
  <li>Sergei Bubka</li>
  <li>Usain Bolt</li>
</ul>

Note : Avec la syntaxe element:nth-child(), le nombre d'enfants compte les enfants voisins de n'importe quel type ; toutefois, il y a uniquement correspondance lorsque l'élément à cette position parmi les enfants correspond aux autres composantes du sélecteur.

Syntaxe

:nth-child() prend un seul argument, qui décrit un motif de correspondance basé sur les indices des éléments d'une liste de voisin. Les indices des éléments démarrent à 1.

css
:nth-child(<nieme> [of <complex-selector-list>]?) {
  /* ... */
}

Valeurs avec un mot-clé

odd

Représente les éléments dont la position numérique est impaire parmi la liste des voisins (1, 3, 5, etc.).

even

Représente les éléments dont la position numérique est paire parmi la liste des voisins (2, 4, 6, etc.).

Notation fonctionnelle

<An+B>

Représente les éléments dont la position numérique au sein de la liste des voisins correspond au motif An+B, pour chaque entier positif n, où :

  • A est un incrément entier,
  • B est un décalage entier,
  • n représente les entiers positifs à partir de 0.

Autrement dit, on cible les An+B-ième éléments de la liste. A et B doivent tout deux être des valeurs entières (type CSS <integer>).

La syntaxe of <selector>

En passant un sélecteur en argument, on peut cibler le n-ième élément qui correspond à ce sélecteur. Ainsi, le sélecteur suivant cible les trois premiers éléments d'une liste qui ont class="important".

css
:nth-child(-n + 3 of li.important) {
}

Le résultat obtenu est différent si on sort le sélecteur de la fonction :

css
li.important:nth-child(-n + 3) {
}

Dans ce deuxième cas, le sélecteur cible les éléments d'une liste s'ils font partie des trois premiers enfants et qu'ils correspondent au sélecteur li.important.

Exemples

Exemples de sélecteurs

tr:nth-child(odd) ou tr:nth-child(2n+1)

Cible les lignes impaires d'un tableau HTML : 1, 3, 5, etc.

tr:nth-child(even) ou tr:nth-child(2n)

Cible les lignes paires d'un tableau HTML  : 2, 4, 6, etc.

:nth-child(7)

Cible le septième élément.

:nth-child(5n)

Cible les éléments 5 [=5×1], 10 [=5×2], 15 [=5×3], etc. La première valeur correspondant à cette formule est 0 [=5x0], mais ne correspond à aucun élément, car ils sont indexés à partir de 1, même si n commence à 0. Cela peut sembler étrange, mais prend du sens quand on note que le coefficient B de la formule est strictement positif (>0), comme dans les exemples suivants.

:nth-child(n+7)

Cible le septième élément et ceux qui suivent : 7 [=0+7], 8 [=1+7], 9 [=2+7], etc.

:nth-child(3n+4)

Cible les éléments 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], etc.

:nth-child(-n+3)

Cible les trois premiers éléments. [=-0+3, -1+3, -2+3]

p:nth-child(n)

Cible tous les éléments <p> d'un groupe de voisins. Cela sélectionne les mêmes éléments que le sélecteur simple p (mais avec une spécificité supérieure).

p:nth-child(1) ou p:nth-child(0n+1)

Cible tout élément <p> qui est le premier élément d'un group de voisin. Cette forme est équivalente au sélecteur :first-child (et possède la même spécificité).

p:nth-child(n+8):nth-child(-n+15)

Cible du huitième jusqu'au quinzième élément <p> d'un groupe de voisins.

Exemple détaillé

HTML

html
<h3>
  <code>span:nth-child(2n+1)</code>, sans <code>&lt;em&gt;</code> parmi les
  éléments enfants.
</h3>
<p>Les enfants 1, 3, 5, et 7 sont sélectionnés.</p>
<div class="premier">
  <span>Span 1 !</span>
  <span>Span 2</span>
  <span>Span 3 !</span>
  <span>Span 4</span>
  <span>Span 5 !</span>
  <span>Span 6</span>
  <span>Span 7 !</span>
</div>

<br />

<h3>
  <code>span:nth-child(2n+1)</code>, avec un <code>&lt;em&gt;</code> parmi les
  éléments enfants.
</h3>
<p>
  Les enfants 1, 5, et 7 sont ciblés.<br />
  3 est utilisé dans le compteur et est un enfant, mais il n'est pas ciblé, car
  ce n'est pas un <code>&lt;span&gt;</code>.
</p>
<div class="deuxieme">
  <span>Span !</span>
  <span>Span</span>
  <em>Voici un `em`.</em>
  <span>Span</span>
  <span>Span !</span>
  <span>Span</span>
  <span>Span !</span>
  <span>Span</span>
</div>

<br />

<h3>
  <code>span:nth-of-type(2n+1)</code>, avec un <code>&lt;em&gt;</code> parmi les
  éléments enfants.
</h3>
<p>
  Les enfants 1, 4, 6, et 8 sont ciblés.<br />
  3 n'est pas utilisé pour le compteur ou ciblé, car c'est un élément
  <code>&lt;em&gt;</code>, pas un <code>&lt;span&gt;</code>, et
  <code>nth-of-type</code> cible uniquement les enfants de ce type. L'élément
  <code>&lt;em&gt;</code> est complètement ignoré.
</p>
<div class="troisieme">
  <span>Span !</span>
  <span>Span</span>
  <em>Voici un `em`.</em>
  <span>Span !</span>
  <span>Span</span>
  <span>Span !</span>
  <span>Span</span>
  <span>Span !</span>
</div>

CSS

css
.premier span:nth-child(2n + 1),
.deuxieme span:nth-child(2n + 1),
.troisieme span:nth-of-type(2n + 1) {
  background-color: tomato;
}

Résultat

Utiliser of

Dans cet exemple, nous avons une liste de noms non-ordonnée, certains sont marqués comme notés à l'aide de class="noted". Ceux-là ont été mis en avant avec une bordure inférieure épaisse.

HTML

html
<ul>
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
  <li>Aylin</li>
  <li>Leo</li>
  <li>Leyla</li>
  <li class="noted">Bruce</li>
  <li>Aisha</li>
  <li>Veronica</li>
  <li class="noted">Kyouko</li>
  <li>Shireen</li>
  <li>Tanya</li>
  <li class="noted">Marlene</li>
</ul>

CSS

Avec le CSS qui suit, nous ciblons les éléments de la liste pairs parmi ceux qui ont class="noted".

css
li:nth-child(even of .noted) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

Résultat

Les éléments avec class="noted" ont une bordure inférieure plus épaisse et les éléments 3, 10 et 17 ont un arrière-plan coloré, car ils sont les éléments pairs de la liste des éléments ayant class="noted".

Syntaxe of et sélecteur du n-ième enfant

Dans cet exemple, nous avons deux listes de noms non-ordonnées. La première liste illustre l'effet de li:nth-child(-n + 3 of .noted) et la seconde celui de li.noted:nth-child(-n + 3).

HTML

html
<ul class="one">
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
</ul>
<ul class="two">
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
</ul>

CSS

css
ul.one > li:nth-child(-n + 3 of .noted) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

ul.two > li.noted:nth-child(-n + 3) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

Résultat

Dans le premier cas, on applique le style aux trois premiers éléments de la liste ayant class="noted", qu'ils soient ou non parmi les trois premiers éléments de la liste.

Dans le second cas, on applique le style aux éléments ayant class="noted" s'ils font partie des trois premiers éléments de la liste.

Utiliser of pour corriger les tableaux à bandes alternées

Il est fréquent d'utiliser des lignes alternant entre clair et sombre afin de faciliter la lecture d'un tableau et le rendre plus accessible. Toutefois, si on masque une ligne, les bandes apparaîtront comme fusionnées et empêcheront l'effet escompté. Dans cet exemple, vous pouvez voir deux tableaux qui possèdent une ligne masquée (avec hidden). Dans le second tableau, on gère les lignes masquées à l'aide de of :not([hidden]).

HTML

html
<table class="broken">
  <thead>
    <tr><th>Nom</th><th>Âge</th><th>Pays</th></tr>
  </thead>
  <tbody>
    <tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
    <tr><td>Yuki</td><td>48</td><td>Japon</td></tr>
    <tr hidden><td>Tlayolotl</td><td>36</td><td>Mexique</td></tr>
    <tr><td>Adilah</td><td>27</td><td>Maroc</td></tr>
    <tr><td>Vieno</td><td>55</td><td>Finlande</td></tr>
    <tr><td>Ricardo</td><td>66</td><td>Brésil</td></tr>
  </tbody>
</table>
<table class="fixed">
  <thead>
    <tr><th>Nom</th><th>Âge</th><th>Pays</th></tr>
  </thead>
  <tbody>
    <tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
    <tr><td>Yuki</td><td>48</td><td>Japon</td></tr>
    <tr hidden><td>Tlayolotl</td><td>36</td><td>Mexique</td></tr>
    <tr><td>Adilah</td><td>27</td><td>Maroc</td></tr>
    <tr><td>Vieno</td><td>55</td><td>Finlande</td></tr>
    <tr><td>Ricardo</td><td>66</td><td>Brésil</td></tr>
  </tbody>
</table>

CSS

css
.broken > tbody > tr:nth-child(even) {
  background-color: silver;
}
css
.fixed > tbody > tr:nth-child(even of :not([hidden])) {
  background-color: silver;
}

Résultat

Dans le premier tableau, on utilise simplement :nth-child(even), qui cible la troisième ligne, également dotée de l'attribut hidden. On a donc la troisième ligne qui n'est pas visible et la deuxième et la quatrième qui sont comptées comme paires. Si c'est vrai sur le plan technique (l'arborescence du document), ce n'est pas le cas visuellement.

Dans le second tableau, on utilise la syntaxe of afin de cibler uniquement les lignes (tr) qui ne sont pas masquées, à l'aide de :nth-child(even of :not([hidden])).

Mettre en forme une colonne de tableau

Pour mettre en forme une colonne de tableau, on ne peut pas cibler l'élément <col>, car les cellules du tableau n'en sont pas des enfants (alors que les cellules sont bien des enfants des lignes <tr>). Les pseudo-classes comme :nth-child() s'avèrent alors particulièrement utiles pour sélectionner les cellules d'une colonne.

Dans cet exemple, on applique différents styles pour chaque colonne.

HTML

html
<table>
<caption>Liste des élèves</caption>
<colgroup>
  <col/>
  <col/>
  <col/>
</colgroup>
  <thead>
    <tr><th>Nom</th><th>Âge</th><th>Pays</th></tr>
  </thead>
  <tbody>
    <tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
    <tr><td>Yuki</td><td>48</td><td>Japon</td></tr>
  </tbody>
</table>

CSS

css
td {
  padding: 0.125rem 0.5rem;
  height: 3rem;
  border: 1px solid black;
}

tr :nth-child(1) {
  text-align: left;
  vertical-align: bottom;
  background-color: silver;
}

tbody tr :nth-child(2) {
  text-align: center;
  vertical-align: middle;
}

tbody tr :nth-child(3) {
  text-align: right;
  vertical-align: top;
  background-color: tomato;
}

Résultat

Specifications

Specification
Selectors Level 4
# nth-child-pseudo

Compatibilité des navigateurs

Voir aussi