:last-child
Correspond à l’élément qui est le dernier enfant de son parent.
Exemple
#.crumbs li:not(:last-child)::after {
content: "/";
margin: 0 8px;
color: #71717a;
}
.crumbs li:last-child {
color: #fff;
font-weight: 600;
}<ol class="crumbs" style="display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; color: #a1a1aa;">
<li>Documentation</li>
<li>CSS</li>
<li>:last-child</li>
</ol>Définition et utilisation
#La pseudo-classe :last-child est le miroir de :first-child : elle sélectionne l’élément placé tout à la fin du parent. L’exemple classique est la suppression de la marge basse du dernier paragraphe d’une carte, pour que l’espace par rapport au bord soit le même de chaque côté.
Le même piège que pour :first-child s’applique. Le sélecteur p:last-child ne fonctionne que si le paragraphe est vraiment le dernier enfant. S’il est suivi d’un bouton ou d’un pied de carte, rien ne sera sélectionné. C’est là que :last-of-type aide.
La pseudo-classe s’actualise en direct. Quand un script ajoute un nouvel élément à la fin de la liste, l’ancien dernier élément cesse de correspondre, et le style passe au nouvel élément sans aucun changement dans le CSS.
Syntaxe
#sélecteur:last-child { propriété: valeur; }Exemples de sélecteurs
#- Le dernier point de la liste, car il clôt son parent.
- Rien ne se met en surbrillance : le dernier enfant de l’article est le bouton.
- Le dernier paragraphe parmi les paragraphes, même si un autre élément le suit.
- Tous les points sauf le dernier, par exemple pour des séparateurs insérés entre les éléments.
Exemples de sélecteurs en pratique
#li:last-child
li:last-child { background: #7c3aed; color: #fff; }p:last-child
p:last-child { background: #7c3aed; color: #fff; }p:last-of-type
p:last-of-type { background: #7c3aed; color: #fff; }li:not(:last-child)
li:not(:last-child) { background: #7c3aed; color: #fff; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Dans les cartes et les fenêtres, remettez à zéro la marge basse du dernier enfant (
.card > :last-child { margin-bottom: 0 }). L’espace par rapport au bord inférieur sera égal à celui du haut. - Le plus simple pour des séparateurs entre éléments est
li:not(:last-child)::after. Le dernier élément ne recevra pas le caractère superflu. - Quand différents éléments peuvent apparaître en fin de parent,
:last-of-typeest plus robuste que:last-child.
Entrées associées
#- :first-childCorrespond à l’élément qui est le premier enfant de son parent.
- :nth-child()Sélectionne des éléments selon leur position parmi leurs frères : un sur deux, un sur trois, les trois premiers ou tous à partir du septième.
- :nth-of-type()Sélectionne des éléments selon leur position parmi les frères portant la même balise, par exemple une image sur deux ou le troisième paragraphe.
- :not()Sélectionne les éléments qui ne correspondent à aucun des sélecteurs fournis, ni à aucun de la liste.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.