CSS :nth-last-child Pseudo-classe
La pseudo-classe CSS :nth-last-child() sélectionne des éléments en partant du dernier. Apprenez à l'utiliser avec des exemples.
La pseudo-classe :nth-last-child() sélectionne des éléments en fonction de leur position parmi un groupe de frères et sœurs, en comptant à partir du dernier élément vers l'arrière. C'est le miroir de :nth-child() : au lieu de compter depuis le début, elle compte depuis la fin.
C'est donc l'outil idéal quand vous souhaitez cibler la distance d'un élément par rapport à la fin d'une liste — par exemple, styliser le dernier élément, les derniers éléments, ou « tous les éléments sauf le dernier ». Comme le comptage commence depuis le bas, la règle continue de fonctionner même si vous ajoutez ou supprimez des éléments en début de liste.
L'argument entre parenthèses peut être un nombre unique, un mot-clé (odd / even), ou une formule An+B.
Différence avec :nth-child()
Les deux pseudo-classes comptent parmi les frères et sœurs, mais dans des directions opposées :
:nth-child(1)sélectionne le premier élément frère.:nth-last-child(1)sélectionne le dernier élément frère (équivalent à:last-child).
Ainsi, li:nth-last-child(2) cible toujours l'avant-dernier élément de liste, quel que soit le nombre d'éléments qui le précèdent. Utilisez :nth-last-child() lorsque votre style est ancré à la fin du groupe plutôt qu'au début.
Remarque :
:nth-last-child()compte tous les éléments frères quel que soit leur type. Si vous devez compter uniquement les frères du même type d'élément (en comptant depuis la fin), utilisez:nth-last-of-type()à la place.
Valeurs par mot-clé
odd
Sélectionne les éléments dont le numéro d'index est impair (par exemple, 1, 3, 5, 7, etc.).
even
Sélectionne les éléments dont le numéro d'index est pair (par exemple, 2, 4, 6, 8, etc.).
Notation fonctionnelle
<An+B>
Sélectionne les éléments dont la position numérique (comptée depuis le dernier frère) correspond au modèle An+B, évalué pour chaque valeur entière non négative de n (0, 1, 2, …). L'index du dernier élément est 1. A et B doivent être des entiers et peuvent être négatifs : A définit le pas (longueur du motif) et B définit le décalage.
Quelques formules courantes, en tenant compte du sens de comptage :
| Formule | Éléments correspondants (comptés depuis la fin) |
|---|---|
2n | Chaque 2e élément (even) |
2n+1 | Un élément sur deux en commençant par le dernier (odd) |
3 | Uniquement le 3e élément en partant de la fin |
n+3 | Le 3e élément en partant de la fin et tout ce qui le précède |
-n+3 | Uniquement les 3 derniers éléments |
Version
Syntaxe
Syntaxe CSS :nth-last-child
selector:nth-last-child() {
css declarations;
}Exemple du sélecteur :nth-last-child() :
Exemple CSS :nth-last-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-child(1) {
background-color: #1c87c9;
color: #fff;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Ici, p:nth-last-child(1) sélectionne le paragraphe qui est le dernier enfant de son parent, donc seul le second paragraphe reçoit l'arrière-plan bleu.
Exemple des mots-clés « odd » et « even » :
Exemple de code CSS :nth-last-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-child(odd) {
background: #1c87c9;
color: #eee;
}
p:nth-last-child(even) {
background: #666;
color: #eee;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>En comptant depuis la fin, le Paragraph 3 est en position 1 (odd), le Paragraph 2 en position 2 (even), et le Paragraph 1 en position 3 (odd). Ainsi, les Paragraphs 1 et 3 utilisent la règle odd et le Paragraph 2 utilise la règle even.
Exemple de :nth-last-child() avec la balise <table> :
Remarque : Pour que tr soit sélectionné, il doit être un enfant direct de tbody ou de table.
Exemple de code CSS :nth-last-child avec la balise table
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 1px solid #8EBF41;
border-spacing: 10px;
font-family: sans-serif;
}
table tr {
background-color: #cccccc;
}
/* Selects the last three elements */
tr:nth-last-child(-n+3) {
background-color: #8EBF41;
}
table tr td {
padding: 10px;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n+2) {
color: #ffffff;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 900;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<table>
<tbody>
<tr>
<td>First row</td>
</tr>
<tr>
<td>Second row</td>
</tr>
<tr>
<td>Third row</td>
</tr>
<tr>
<td>Fourth row</td>
</tr>
<tr>
<td>Fifth row</td>
</tr>
</tbody>
</table>
</body>
</html>Exemple de :nth-last-child() avec la balise <li> :
Exemple de code CSS :nth-last-child avec la balise ul
<!DOCTYPE html>
<html>
<head>
<style>
/* Selects the last three list items */
li:nth-last-child(-n+3),
li:nth-last-child(-n+3) ~ li {
color: #8EBF41;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<ol>
<li>List Item One</li>
<li>List Item Two</li>
</ol>
<ol>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
<li>List Item Five</li>
<li>List Item Six</li>
</ol>
</body>
</html>Notez que li:nth-last-child(-n+3) est combiné avec le sélecteur de frères généraux (~ li) afin que les trois derniers éléments de liste soient mis en évidence de façon fiable sur tous les navigateurs. Dans la deuxième liste (six éléments), les trois derniers — « Four », « Five » et « Six » — passent au vert.
Sélecteurs associés
:nth-child()— la même idée, mais en comptant depuis le premier frère.:nth-of-type()— compte uniquement les frères du même type d'élément, depuis le début.:nth-last-of-type()— compte les frères du même type depuis la fin.:last-child— un raccourci équivalent à:nth-last-child(1).