:nth-of-type

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.

La pseudo-classe CSS :nth-of-type() permet de cibler les éléments selon leur position parmi les voisins du même type (les mêmes noms de balise).

Exemple interactif

Syntaxe

La pseudo-classe nth-of-type ne prend qu'un argument qui représente le motif de répétition pour les éléments ciblés.

Voir :nth-child pour une explication plus détaillée de sa syntaxe.

css
:nth-of-type(<an-plus-b> | even | odd) {
  /* ... */
}

Exemples

Exemple simple

Dans cet exemple nous allons colorer un paragraphe sur deux avec des couleurs différentes et mettre le premier paragraphe en gras.

HTML

html
<div>
  <div>Cet élément n'est pas compté.</div>
  <p>1er paragraphe.</p>
  <p class="fancy">2e paragraphe.</p>
  <div>Cet élément n'est pas compté.</div>
  <p class="fancy">3e paragraphe.</p>
  <p>4e paragraphe.</p>
</div>

CSS

css
/* Paragraphes impairs */
p:nth-of-type(2n + 1) {
  color: red;
}

/* Paragraphes pairs */
p:nth-of-type(2n) {
  color: blue;
}

/* Premier paragraphe */
p:nth-of-type(1) {
  font-weight: bold;
}

/* Cela ciblera le 3e paragraphe, car on cible les éléments impairs (2n+1) et qui ont la classe fancy.
Le deuxième paragraphe a bien la classe fancy, mais n'est pas ciblé, car pair (et non :nth-of-type(2n+1)) */
p.fancy:nth-of-type(2n + 1) {
  text-decoration: underline;
}

Résultat

must be provided

Spécifications

Specification
Selectors Level 4
# nth-of-type-pseudo

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:nth-of-type()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Voir aussi