: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

dt {
  font-weight: bold;
}

dd {
  margin: 3px;
}

dd:nth-of-type(even) {
  border: 2px solid orange;
}

<dl>
  <dt>Vegetables:</dt>
  <dd>1. Tomatoes</dd>
  <dd>2. Cucumbers</dd>
  <dd>3. Mushrooms</dd>
  <dt>Fruits:</dt>
  <dd>4. Apples</dd>
  <dd>5. Mangos</dd>
  <dd>6. Pears</dd>
  <dd>7. Oranges</dd>
</dl>

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

Spécifications

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