CSS3 :nth-of-type() Sélecteur

Manuel de référence complet des sélecteurs CSS

Exemple

Spécifiez la couleur d'arrière-plan de chaque élément p qui correspond au deuxième frère du même type :

p:nth-of-type(2)
{
background:#ff0000;
}

Définition et utilisation

Le sélecteur :nth-of-type(n) correspond au n-ième frère du même type.

n peut être un nombre, un mot-clé ou une formule.

Astuce :Voir aussi:nth-child()Sélecteur. Ce sélecteur correspond au n-ième élément enfant dans son parent. Regardez le :nth-child() 。

Prise en charge des navigateurs

Les nombres dans le tableau indiquent la première version de navigateur qui prend entièrement en charge la propriété.

Sélecteurs
:nth-of-type()	4.0	9.0	3.5	3.2	9.6

Plus d’exemples

Exemple 1

Les mots-clés odd et even peuvent être utilisés pour correspondre aux éléments enfants dont l'index est impair ou pair (l'index du premier enfant est 1).

Ici, nous spécifions deux couleurs d'arrière-plan différentes pour les éléments p impairs et pairs :

p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}

Essayez-le vous-même »

Exemple 2

Utilisez la formule (an+ b). Description : a représente la taille d'un cycle, n est un compteur (commençant à 0), et b est un décalage.

Ici, nous spécifions une couleur d'arrière-plan pour tous les éléments p dont l'index est un multiple de 3 :

p:nth-of-type(3n+0)
{
background:#ff0000;
}