:nth-last-of-type

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La pseudo-classe CSS :nth-last-of-type permet de cibler les éléments selon leur position parmi les voisins qui sont du même type (les mêmes balises) en partant de la fin.

Exemple interactif

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.

Voir :nth-last-child pour une explication plus détaillée de sa syntaxe.

css
:nth-last-of-type(<an-plus-b> | even | odd) {
  /* ... */
}

Exemples

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

HTML

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>

CSS

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

Résultat

must be provided

Spécifications

Specification
Selectors Level 4
# nth-last-of-type-pseudo

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:nth-last-of-type()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Voir aussi