:nth-of-type

Résumé

La pseudo-classe CSS :nth-of-type ciblent un élément qui a an+b-1 nœud frères avec le même nom d'élément avant lui, pour une valeur postive ou égale à 0 de n, et qui a un élément parent.

Les arguments acceptés sont les même que :nth-child.

Cette pseudo-classe est plus souple et pratique si vous voulez vous assurer que vous ciblez bien le même type d'élément, quelque soit leurs emplacements dans l'élément parent, ou si différents élément apparaissent avant.

Syntaxe

element:nth-of-type(an + b) { propriétés CSS }

Exemple

CSS

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

HTML

<div>
  <p>Premier paragraphe paragraph (aligné à gauche)</p>
  <p>Deuxième paragraphe (aligné à droite)</p>
  <p>Troisième paragraphe (aligné à gauche)</p>
</div>

Résultat

 

Spécifications

Spécification Statut Commentaire
Selectors Level 4
La définition de ':nth-of-type' dans cette spécification.
Version de travail Aucun changement.
Selectors Level 3
La définition de ':nth-of-type' dans cette spécification.
Recommendation Première définition.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 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 de base 2.1 1.0 (1.9.1) 9.0 9.5 3.1

Voir également

:nth-child

Étiquettes et contributeurs liés au document

Dernière mise à jour par : teoli,