CSS3 :nth-last-of-type()Sélecteurs

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

Exemple

Spécifie la couleur d'arrière-plan pour chaque élément p qui correspond à l'avant-dernier élément frère du même type :

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

Définition et utilisation

Le sélecteur :nth-last-of-type(n) correspond à l'élément frère nième à partir de la fin du même type.

nIl peut s'agir d'un nombre, d'un mot-clé ou d'une formule.

Astuce :Veuillez vous référer à ::nth-last-child()Sélecteur. Ce sélecteur correspond à l'élément enfant structurel nième à partir de la fin dans l'élément parent.

Prise en charge des navigateurs

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

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

Plus d’exemples

Exemple 1

Odd et even peuvent être utilisés comme mots-clés pour correspondre aux éléments enfants dont l'index est impair ou pair.

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

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

Essayez-le vous-même »

Exemple 2

En utilisant 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, dans l'ordre inverse, est un multiple de 3 :

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