: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( <an-plus-b> ) { style properties }


<an-plus-b> = An+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>
    <p>Premier paragraphe (à gauche)</p>
    <p>Deuxième paragraphe (à droite)</p>
    <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 Aucune modification.
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) Internet Explorer Opera Safari
Support simple 1.0 3.5 (1.9.1) 9.0 9.5 3.1
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 2.1 1.0 (1.9.1) 9.0 9.5 3.1

Voir aussi

Étiquettes et contributeurs liés au document

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