:nth-last-of-type

La pseudo-classe :nth-last-of-type permet de cibler un élément qui possède an+b-1 nœud frères étant les mêmes éléments à partir de la fin de l'arbre et qui ont le même élément parent (l'indice n sera incrémenté à partir de 0). Autrement dit, la pseudo-classe parcourra les éléments d'un type donné en partant de la fin de l'élément parent, selon le motif passé en argument.

Pour plus de détails sur les arguments passés à cette pseudo-classe, voir :nth-child.

Syntaxe

:nth-last-of-type( <an-plus-b> ) { style properties }


<an-plus-b> = An+B | even | odd

Exemples

Ici, on souhaite mettre en avant le deuxième élément <span> en partant de la fin :

CSS

span:nth-last-of-type(2) {
  background-color: lime;
}

HTML

<div>
  <span>Ce span est le premier !</span>
  <span>Ce span ne l'est pas. :(</span>
  <em>Celui-ci est bizarre.</em>
  <span>Celui-ci l'est !</span>
  <strike>C'est un autre type</strike>
  <span>Malheureusement, celui-ci ne l'est pas.</span>
</div>

Résultat

 

Spécifications

Spécification État Commentaires
Selectors Level 4
La définition de ':nth-last-of-type' dans cette spécification.
Version de travail Aucune modification.
Selectors Level 3
La définition de ':nth-last-of-type' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 4.0 3.5 (1.9.1) 9.0 9.5 3.2
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 2.1 1.0 (1.9.1) 9.0 10.0 3.2

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, FredB, teoli, tregagnon, the prisoner
 Dernière mise à jour par : SphinxKnight,