MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

:nth-of-type

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. 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

:nth-of-type( <nth> )


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

Exemples

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

CSS

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

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

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é Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 1.0 3.5 (1.9.1) (Oui) 9.0 9.5 3.1
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
Support simple 2.1 1.0 (1.9.1) (Oui) 9.0 9.5 3.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,