La pseudo-classe :nth-last-child permet de cibler un élément qui possède an+b-1 nœud frères qui le suivent pour un même élément parent avec un indice n entier qui est incrémenté à partir de 0. Avec CSS3, il était nécessaire que l'élément ciblé ait un élément parent, cette restriction a été levée en CSS4.

/* Cible les éléments qui sont les 4e, 8e, 16e     */
/* 20e à partir de la fin, quel que soit leur type */
body: nth-last-child(4n) {
  background-color: lime;
}

Cette pseudo-classe fonctionne comme :nth-child mais cette fois-ci, le comptage s'effectue depuis la fin. Pour plus d'informations sur la syntaxe des arguments, voir :nth-child.

Syntaxe

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

Valeurs avec un mot-clé

odd
Représente les éléments dont la position est impaire par rapport à leurs voisins lorsqu'elle est comptée depuis la fin.
even
Représente les éléments dont la position est paire par rapport à leurs voisins lorsqu'elle est comptée depuis la fin.

Notation fonctionnelle

<An+B>
Représente les éléments dont la position, à partir de la fin, est la An+B-ième avec n qui parcourt les entiers à partir de 0. Les valeurs fournies pour A et B doivent être des entiers <integer>.

Syntaxe formelle

:nth-last-child( <nth> [ of <selector># ]? )


<nth> = <an-plus-b> | even | odd

Exemples

Exemples

tr:nth-last-child(-n+4)
Permettra de cibler les quatre dernières lignes d'un tableau.
span:nth-last-child(even)
Permettra de cibler tous les éléments <span> pairs en partant de la fin.

Exemple appliqué

CSS

table {
  border:1px solid blue;
}
tr:nth-last-child(-n+3) { /* les trois derniers enfants */
  background-color: lime;
}

HTML

<table>
  <tbody>
    <tr>
      <td>Première ligne</td>
    </tr>
    <tr>
       <td>Deuxième ligne</td>
    </tr>
    <tr>
       <td>Troisième ligne</td>
    </tr>
    <tr>
       <td>Quatrième ligne</td>
    </tr>
    <tr>
       <td>Sixième ligne</td>
    </tr>
  </tbody>
</table>

Résultat

Spécifications

Spécification État Commentaires
Selectors Level 4
La définition de ':nth-last-child' dans cette spécification.
Version de travail Les éléments ciblés peuvent ne pas avoir d'élément parent.
Selectors Level 3
La définition de ':nth-last-child' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple4 Oui3.5993.2
Matches elements with no parent57 ?52 ?44 ?
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui Oui Oui4103.2 ?
Matches elements with no parent5757 ?5244 ? ?

Voir aussi

Étiquettes et contributeurs liés au document

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