CSS :last-child Pseudo Classe
Apprenez comment fonctionne la pseudo-classe CSS :last-child, ses différences avec :last-of-type, avec des exemples pour les listes, tableaux et formulaires.
La pseudo-classe CSS :last-child sélectionne un élément qui est le dernier enfant de son parent — c'est-à-dire le dernier frère dans la liste des enfants de son parent. Elle est le plus souvent utilisée pour supprimer une bordure entre les éléments d'une liste, réinitialiser la marge inférieure du dernier paragraphe, ou mettre en évidence la dernière ligne d'un tableau.
Cette page explique comment :last-child est évalué, la règle essentielle qui surprend la plupart des développeurs, comment il se compare à :last-of-type, et plusieurs exemples exécutables.
Fonctionnement de :last-child
Le sélecteur p:last-child ne signifie pas « le dernier <p> dans le parent. » Il signifie « un <p> qui est aussi le tout dernier enfant de son parent. » La position est vérifiée en premier ; le nom de la balise est vérifié en second.
/* Matches the <p> ONLY when it is the final child of its parent */
p:last-child {
font-weight: bold;
}Considérez ce balisage :
<div>
<p>Paragraph — NOT selected.</p>
<span>I am the last child, so the rule above never fires.</span>
</div>Comme <span> est le dernier enfant, p:last-child ne correspond à rien ici. Pour cibler le dernier <p> quelle que soit la balise qui suit, utilisez :last-of-type à la place.
:last-child est le miroir de :first-child. Pour compter depuis la fin (par exemple, l'avant-dernier), utilisez :nth-last-child().
Dans Selectors Level 3, l'élément correspondant devait avoir un parent. Selectors Level 4 assouplit cette règle : :last-child peut désormais correspondre à un élément racine sans parent.
Syntaxe
selector:last-child {
/* declarations */
}:last-child peut être combiné avec n'importe quel sélecteur d'élément, classe ou ID :
li:last-child { border-bottom: none; } /* last <li> in its parent */
.card:last-child { margin-bottom: 0; } /* last element with class .card */
tr:last-child td { font-weight: bold; } /* cells in the last table row */Exemple de base : paragraphes
Les deux paragraphes ci-dessous sont tous les deux des enfants de <body>. p:last-child correspond uniquement au second car il est le dernier enfant de son parent.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:last-child {
background-color: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<h2>Last-child selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Exemple avec une liste : mise en forme du dernier <li>
li:last-child s'applique au dernier <li> dans chaque <ul> ou <ol> indépendamment — les listes imbriquées ont chacune leur propre dernier enfant.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:last-child {
background: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<h2>:last-child selector example</h2>
<ul>
<li>Paris</li>
<li>Moscow</li>
<li>Rome</li>
</ul>
<ol>
<li>Paris</li>
<li>Moscow</li>
<li>Rome</li>
</ol>
</body>
</html>Plusieurs paragraphes dans un conteneur
Quand quatre éléments <p> sont frères dans le même parent, seul le quatrième correspond à p:last-child.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:last-child {
background: #8ebf42;
color: #ffffff;
}
</style>
</head>
<body>
<h2>:last-child selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</body>
</html>Listes imbriquées
:last-child s'applique indépendamment à chaque niveau d'imbrication. Dans l'exemple ci-dessous, « List Item 3 » est le dernier enfant du <ul> externe, et « List Item 3.3 » est le dernier enfant du <ul> interne.
<!DOCTYPE html>
<html>
<head>
<style>
ul li {
color: #8ebf42;
}
ul li:last-child {
border: 1px dotted #8ebf42;
color: #1c87c9;
}
</style>
</head>
<body>
<h2>:last-child selector example</h2>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>
List Item 3
<ul>
<li>List Item 3.1</li>
<li>List Item 3.2</li>
<li>List Item 3.3</li>
</ul>
</li>
</ul>
</body>
</html>Cas d'utilisation courants
Suppression d'un séparateur en fin de liste
Un motif classique : ajouter une bordure de séparation à chaque élément, puis la supprimer sur le dernier pour que le groupe ne se termine pas par une ligne superflue.
.menu li {
border-bottom: 1px solid #ccc;
padding: 8px 0;
}
/* Remove the bottom border from the final item */
.menu li:last-child {
border-bottom: none;
}C'est plus facile à maintenir que d'ajouter manuellement une classe au dernier <li>, car le sélecteur s'adapte automatiquement lorsque des éléments sont ajoutés ou supprimés.
Suppression de la marge du dernier paragraphe
Les blocs de contenu nécessitent souvent un espacement entre les paragraphes, mais pas après le dernier — sinon la marge du paragraphe s'ajoute au rembourrage du conteneur.
.content p {
margin-bottom: 1rem;
}
.content p:last-child {
margin-bottom: 0;
}Mise en forme de la dernière ligne d'un tableau
table tr:last-child td {
font-weight: bold;
border-bottom: 2px solid #333;
}Cela met en évidence la ligne des totaux dans un tableau récapitulatif sans ajouter de classe au HTML.
:last-child vs :last-of-type
Ces deux sélecteurs sont souvent confondus. La différence clé :
| Sélecteur | Ce qu'il vérifie |
|---|---|
p:last-child | Ce <p> est-il le dernier enfant de son parent (par position) ? |
p:last-of-type | Ce <p> est-il le dernier <p> parmi ses frères (par type, ignorant les autres éléments) ? |
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p> <!-- p:last-of-type matches here -->
<span>A span</span> <!-- this is the last child -->
</div>p:last-child→ ne correspond à rien (le dernier enfant est un<span>, pas un<p>).p:last-of-type→ correspond à « Paragraph 2 » (le dernier<p>parmi les frères).
Utilisez :last-child quand la position compte. Utilisez :last-of-type quand seul le type d'élément importe.
Spécificité
:last-child est une pseudo-classe, elle contribue donc à 0-1-0 en spécificité — la même qu'un sélecteur de classe. Les sélecteurs combinés s'accumulent normalement :
li:last-child /* specificity: 0-1-1 (type + pseudo-class) */
.list li:last-child /* specificity: 0-2-1 (class + type + pseudo-class) */Compatibilité des navigateurs
:last-child est pris en charge par tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) depuis IE 9. Aucun préfixe vendeur ni solution de repli n'est nécessaire.
Spécification
Sélecteurs associés
:first-child— sélectionne le premier enfant de son parent.:last-of-type— sélectionne le dernier élément d'un type donné, en ignorant les autres types d'éléments parmi les frères.:only-child— sélectionne un élément qui est l'unique enfant de son parent.:nth-last-child()— sélectionne des éléments en comptant depuis la fin à l'aide d'une formule.:nth-child()— sélectionne des éléments en comptant depuis le début à l'aide d'une formule.