:nth-of-type

La pseudo-classe :nth-of-type() correspond à des éléments d'un type donné, en fonction de leur position au sein d'un groupe de frères et sœurs.

/* Sélectionne chaque élément de type <p> dont
la position parmi l'ensemble des éléments de type <p>
descendants directement du même élément parent,
est un multiple de 4. */
p:nth-of-type(4n) {
  color: lime;
}

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.

Pour une explication plus détaillée de sa syntax voir :nth-child

Syntaxe formelle

:nth-of-type( <nth> )


<nth> = <an-plus-b> | even | odd

Exemples

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

HTML

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

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

Résultat

Spécifications

Spécification État Commentaires
Selectors Level 4
La définition de ':nth-of-type' dans cette spécification.
Version de travail L'élément ciblé ne doit pas nécessairement avoir un élément parent.
Selectors Level 3
La définition de ':nth-of-type' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi