La pseudo-classe :nth-of-type(an+b) permet de cibler des éléments qui possèdent 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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet OuiFirefox Support complet 3.5IE Support complet 9Opera Support complet 9.5Safari Support complet 3.1WebView Android Support complet 2Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 9.5Safari iOS Support complet 3.1Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

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