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 les quatre éléments <p>
parmi n'importe quel groupe de frères et sœurs */
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: ref;
}

/* 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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur 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

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