Sélecteur CSS :nth-last-child()
Exemple
Spécifiez une couleur d'arrière-plan pour chaque élément <p> qui est le deuxième enfant de son parent, à partir du dernier enfant :
p:nth-last-child(2)
{
background: red;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
Le sélecteur correspond à chaque élément qui est le n ième enfant, quel que soit le type, de son parent, à compter du dernier enfant.:nth-last-child(n)
n peut être un nombre, un mot clé ou une formule.
Astuce : regardez le sélecteur :nth-last-of-type() pour sélectionner l'élément qui est le n ième enfant, d'un type spécifié , de son parent, à compter du dernier enfant.
Version: | CSS3 |
---|
Prise en charge du navigateur
Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge le sélecteur.
Selector | |||||
---|---|---|---|---|---|
:nth-last-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Syntaxe CSS
:nth-last-child(number) {
css declarations;
}
Plus d'exemples
Exemple
Odd et even sont des mots clés qui peuvent être utilisés pour faire correspondre des éléments enfants dont l'index est pair ou impair.
Ici, nous spécifions deux couleurs d'arrière-plan différentes pour les éléments p pairs et impairs, à partir du dernier enfant :
p:nth-last-child(odd)
{
background: red;
}
p:nth-last-child(even)
{
background: blue;
}
Exemple
À l' aide d'une formule ( an + b ). Description : a représente une taille de cycle, n est un compteur (commence à 0) et b est une valeur de décalage.
Ici, nous spécifions une couleur d'arrière-plan 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: red;
}