Recommandation de cours :

Pseudo-classe :nth-last-child() CSS

Définition et utilisation :nth-last-child(nCSS )

n Les pseudo-classes sont utilisées pour correspondre à chaque élément qui est le nth enfant inverse de son parent, peu importe son type.impair peut être un nombre/index, un mot-clé ( pairou an + b) ou une formule (comme

Conseil :Voir :nth-last-of-type() Les pseudo-classes permettent de sélectionner l'élément qui est le nth enfant inverse de son parent, peu importe son type. n de l'élément enfant. Un élément est un élément enfant d'un autre élément.

Exemple

Exemple 1

Spécifiez la couleur de fond pour chaque élément <p> qui est le deuxième enfant inverse de son parent :

p:nth-last-child(2) {
  background-color: red;
}

Essayez-le vous-même

Exemple 2

impair et pair est un mot-clé, utilisable pour correspondre aux éléments whose index is even or odd.

Ici, nous spécifions des couleurs de fond différentes pour les éléments <p> whose index is even or odd en comptant à partir du bas :

p:nth-last-child(odd) {
  background-color: red;
}
p:nth-last-child(even) {
  background-color: blue;
}

Essayez-le vous-même

Exemple 3

Utilisez l'expression (an + b) Description :a représente un pas entier, n étant tous les entiers non négatifs commencent par 0,b est un décalage entier.

Ici, nous spécifions la couleur de fond pour tous les éléments <p> whose index is a multiple of 3 en comptant à partir du bas :

p:nth-last-child(3n+0) {
  background-color: red;
}

Essayez-le vous-même

Grammaire CSS

:nth-last-child(index | impair | pair | an+b) {
  déclarations css;
}

Détails techniques

Support du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette pseudo-classe.