Le :last-childsélecteur vous permet de cibler le dernier élément directement à l'intérieur de son élément conteneur. Elle est définie dans la spécification CSS Selectors Level 3 comme une «pseudo-classe structurelle», ce qui signifie qu'elle est utilisée pour styliser le contenu en fonction de sa relation avec le contenu parent et frère.
Supposons que nous ayons un article et que nous voulions réduire la taille du dernier paragraphe, pour servir de conclusion au contenu (comme une note de l'éditeur):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
Au lieu d'utiliser une classe (par exemple .last), nous pouvons utiliser :last-childpour la sélectionner:
p:last-child ( font-size: 0.75em; )L'utilisation :last-childest très similaire à :last-of-typemais avec une différence critique: elle est moins spécifique. :last-childessaiera seulement de faire correspondre le tout dernier enfant d'un élément parent, tandis que last-of-typecorrespondra à la dernière occurrence d'un élément spécifié, même s'il n'est pas le dernier dans le HTML. Dans l'exemple ci-dessus, le résultat serait le même, uniquement parce que le dernier enfant de est articleégalement le dernier pélément. Cela révèle le pouvoir de :last-child: il peut identifier un élément par rapport à tous ses frères et sœurs, pas seulement à des frères et sœurs du même type.
L'exemple plus complet ci - dessous montre l'utilisation de :last-childet un sélecteur pseudo-classe associée, :first-child.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Tout | 3.2+ | Tout | 9.5+ | 9+ | Tout | Tout |
:last-childa été introduit dans CSS Selectors Module 3, ce qui signifie que les anciennes versions des navigateurs ne le prennent pas en charge. Cependant, la prise en charge des navigateurs modernes est irréprochable et les nouveaux pseudo-sélecteurs sont largement utilisés dans les environnements de production. Si vous avez besoin d'un support de navigateur plus ancien, polyfill pour IE ou utilisez ces sélecteurs de manière non critique à une amélioration progressive, ce qui est recommandé.