:nth-last-of-type

La pseudo-classe :nth-last-of-type permet de cibler des éléments qui possèdent 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.

/* Cible les éléments <div> qui sont les 4e */
/* 8e, 16e, 20e, à partir du dernier élément */
/* <div> d'un élément parent */
div:nth-last-of-type(4n) {
  background-color: lime;
}

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

Syntaxe

La pseudo-classe nth-last-of-type prend un seul argument qui représente le motif de répétition des éléments correspondants, comptés à partir de la fin.

Syntaxe formelle

:nth-last-of-type( <nth> )


<nth> = <an-plus-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 L'élément ciblé ne doit pas nécessairement avoir un élément parent.
Selectors Level 3
La définition de ':nth-last-of-type' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
:nth-last-of-type()Chrome Support complet 4Edge Support complet 12Firefox Support complet 3.5IE Support complet 9Opera Support complet 9.5Safari Support complet 3.2WebView Android Support complet 2Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 3.2Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi