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 AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
:nth-last-of-type()Chrome Support complet 4Edge Support complet OuiFirefox Support complet 3.5IE Support complet 9Opera Support complet 9.5Safari Support complet 3.2WebView Android Support complet 2Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 10Safari iOS Support complet 3.2Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot, FredB, teoli, tregagnon, ThePrisoner
Dernière mise à jour par : SphinxKnight,