Exemple
Spécifiez une couleur d'arrière - plan pour chaque <p> élément qui est le deuxième enfant de son parent, à compter du dernier enfant:
p:nth-last-child(2)
{
background: #ff0000;
}
Essayez - le vous - même » Plus "Try it Yourself" exemples ci - dessous.
Définition et utilisation
Le :nth-last-child( n ) sélecteur correspond à chaque élément qui est le n ième enfant, indépendamment du type, de son parent, à compter du dernier enfant.
n peut être un nombre, un mot - clé ou une formule.
Tip: Regardez le :nth-last-of-type() sélecteur pour sélectionner l'élément qui est le n ème enfant, of a specified type , de son parent, à compter du dernier enfant.
| Version: | CSS3 |
|---|
support du navigateur
Les chiffres dans le tableau indique la première version du navigateur qui prend en charge entièrement le sélecteur.
| Sélecteur | |||||
|---|---|---|---|---|---|
| :nth-last-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Syntaxe CSS
Autres exemples
Exemple
Odd et même sont des mots-clés qui peuvent être utilisés pour correspondre à des éléments enfants dont l'indice est impair ou pair.
Ici, nous spécifions deux couleurs de fond différentes pour les éléments p paires et impaires, à compter du dernier enfant:
p:nth-last-child(odd)
{
background: #ff0000;
}
p:nth-last-child(even)
{
background: #0000ff;
}
Essayez - le vous - même » Exemple
En utilisant une formule ( an + b ) . Description: a représente une taille de cycle, n est un compteur (starts at 0) , et b est une valeur de décalage.
Ici, nous spécifions une couleur de fond pour tous les éléments p dont l'indice est un multiple de 3, à compter du dernier enfant:
p:nth-last-child(3n+0)
{
background: #ff0000;
}
Essayez - le vous - même »