Sélecteur :NTH-OF-TYPE

Rôle

Le sélecteur nth-of-type est une pseudo-classe désigné par la syntaxe :nth-of-type(n) qui permet de cibler chaque élément qui est le n-ième enfant d’un type particulier de son parent.

Note : contrairement au sélecteur :nth-child(n), le compteur commence à partir du premier élément d’un type particulier trouvé et non pas à partir du premier enfant du parent.

La valeur (n) peut prendre plusieurs valeurs :

* un nombre qui représente le n-ième enfant d’un type particulier. Dans l’exemple ci-dessous, le deuxième paragraphe p est rouge.

p:nth-of-type(2){
  color: red;
}
<h1>titre</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Résultat

* un mot-clé : even ou odd.

Le sélecteur nth-of-type(even) représente les enfants d’un type particulier dont l’indice est pair et nth-of-type(odd) représente les enfants d’un type particulier dont l’indice est impair.

Dans l’exemple ci-dessous, les p de rang impair sont rouges et les p de rang pair sont verts.

p:nth-of-type(odd){
  color: red;
}
p:nth-of-type(even){
  color: green;
}
<h1>titre</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Résultat

* une formule : an + b. La valeur ‘a’ représente un coefficient (que vous devez définir), ‘n’ est le compteur (commence par 0), et b est une valeur de décalage (que vous devez définir)).

Dans l’exemple ci-dessous, on cible le 1e, le 3e, le 5e.. p de body.

p:nth-of-type(2n+1){
  color: red;
}
<h1>titre</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Résultat

Version : CSS3

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

Le sélecteur nth-of-type est pris en charge par tous les principaux navigateurs.
A partir d’Internet Explorer 9.

A voir aussi

:first-child 
:first-of-type
:last-child 
:last-of-type
:nth-child(n) 
:nth-last-child(n) 
:nth-last-of-type(n) 
only-child 
:only-of-type