Pseudo-classe CSS `:nth-of-type()`

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 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>Légumes&nbsp;:</dt>
  <dd>1. Tomates</dd>
  <dd>2. Concombres</dd>
  <dd>3. Champignons</dd>
  <dt>Fruits&nbsp;:</dt>
  <dd>4. Pommes</dd>
  <dd>5. Mangues</dd>
  <dd>6. Poires</dd>
  <dd>7. Oranges</dd>
</dl>

Syntaxe

css

:nth-of-type(<An+B> | even | odd) {
  /* ... */
}

Paramètres

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.

Exemples

Exemple simple

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 cible 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;
}

Note : Il n'existe aucun moyen de sélectionner « la n-ième occurrence d'une classe » en utilisant ce sélecteur. Le sélecteur :nth-of-type ne regarde que le type lors de la création de la liste des correspondances. Vous pouvez cependant utiliser la syntaxe of du sélecteur :nth-child pour obtenir un comportement « la n-ième occurrence d'une classe ». Vous pouvez également appliquer du CSS à un élément en fonction de sa position :nth-of-type et d'une classe, comme montré dans l'exemple précédent.