:last-child

La pseudo-classe :last-child permet de cibler un élément qui est le dernier enfant de son parent.

/* Cible n'importe quel élément <li> tant que    */
/* celui-ci est le dernier enfant de son élément */
/* parent */
li:last-child {
  background-color: lime;
}

Note : En CSS3, l'élément ciblé devait avoir un élément parent, cette restriction a été levée en CSS4.

Syntaxe

:last-child

Exemples

CSS

li:last-child {
  background-color: lime;
}

HTML

<ul>
   <li>Cet élément n'est pas vert !</li>
   <li>Celui-ci est vert.</li>
</ul>

Résultat

Spécifications

Spécification État Commentaires
Selectors Level 4
La définition de ':last-child' dans cette spécification.
Version de travail Il n'est plus obligatoire que l'élément ciblé ait un parent.
Selectors Level 3
La définition de ':last-child' 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
:last-childChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 9Opera Support complet 9.5Safari Support complet 3.2WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 3.2Samsung Internet Android Support complet 1.0
Matches elements with no parentChrome Support complet 57Edge Aucun support NonFirefox Support complet 52IE Aucun support NonOpera Support complet 44Safari Aucun support NonWebView Android Support complet 57Chrome Android Support complet 57Firefox Android Support complet 52Opera Android Support complet 43Safari iOS Aucun support NonSamsung Internet Android Support complet 7.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Voir aussi