Pseudo-classe CSS :nth-last-of-type()

Définition et utilisation

CSS :nth-last-of-type(n) La pseudo-classe permet de correspondre aux éléments qui sont le dernier fils de type spécifique dans leur père : n de fils de l'élément.

n peut être un nombre/index, un mot-clé (impair ou pair) ou une formule (comme an + b).

Astuce :Voir :nth-last-child() La pseudo-classe permet de sélectionner les éléments qui sont le dernier fils de type spécifique dans leur père : n d'un élément, indépendamment de son type.

Exemple

Exemple 1

Assignons une couleur de fond aux éléments <p> qui sont le deuxième fils en arrière du père <p> :

En même temps, assignons une couleur de fond aux éléments <li> qui sont le troisième fils en arrière du père <li> :

p:nth-last-of-type(2) {
  background: red;
}
li:nth-last-of-type(3) {
background: yellow;
}

Essaie-le toi-même

Exemple 2

impair et pair est une clé de mot, utilisable pour correspondre aux éléments whose index is odd ou even (l'index du premier élément fils est 1).

Ici, nous assignons des couleurs de fond différentes aux éléments <p> whose index is odd or even:

p:nth-last-of-type(odd) {
  background: red;
}
p:nth-last-of-type(even) {
  background: blue;
}

Essaie-le toi-même

Exemple 3

Utilisez l'expression (an + b). Description : a représente un pas d'entier, n est tout entier non nul commençant par 0, b est un décalage d'entier.

Ici, nous assignons une couleur de fond aux éléments <p> et <li> whose index is a multiple of 3:

p:nth-last-of-type(3n) {
  background: red;
}
li:nth-last-of-type(3n) {
  background: yellow;
}

Essaie-le toi-même

Grammaire CSS

:nth-last-of-type(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.