La pseudo-classe :nth-of-type(an+b) permet de cibler un élément qui possède an+b-1 frères étant les mêmes éléments dans l'arbre du document et partageant le même élément parent et avec n un entier incrémenté à partir de 0.

/* Cible les éléments <div> si ceux-ci sont les */
/* 4e, 8e, 16e, 20e, etc. d'un élément parent   */
div:nth-of-type(4n) {
  background-color: lime;
}

Pour plus de détails sur la syntaxe relative aux arguments, se référer à la page sur la pseudo-classe :nth-child. Cette pseudo-classe permettra de ne se concentrer que sur un seul type d'élément.

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.

Syntaxe formelle

:nth-of-type( <nth> )


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

Exemples

Dans cet exemple, on alterne l'alignement des paragraphes.

CSS

/* Paragraphes impairs */
p:nth-of-type(2n+1) {
  text-align: left;
}

/* Paragraphes pairs */
p:nth-of-type(2n) {
  text-align: right;
}

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

HTML

<div>
  <span>Ce morceau n'affecte pas le décompte</span> 
  <p>Premier paragraphe (à gauche)</p>
  <p>Deuxième paragraphe (à droite)</p>
  <span>Ce morceau n'affecte pas le décompte non plus</span>
  <p>Troisième paragraphe (à gauche)</p>
</div>

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

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 Oui3.599.53.1
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple2.1 ? Oui49.53.1 ?

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, teoli, tregagnon, FredB, ThePrisoner
 Dernière mise à jour par : SphinxKnight,