Pseudo-classe CSS :nth-last-child
La pseudo-classe :nth-last-child() sélectionne les éléments en fonction de leur index, en partant du dernier élément vers le haut.
La pseudo-classe :nth-last-child() peut être spécifiée par un nombre, un mot-clé ou une formule.
Valeurs de mots-clés
impair
Sélectionne les éléments dont l'index est impair (par ex. 1, 3, 5, 7, etc.).
pair
Sélectionne les éléments dont l'index est pair (par ex. 2, 4, 6, 8, etc.).
Notation fonctionnelle
<An+B>
Sélectionne les éléments dont la position numérique correspond au motif An+B (pour toute valeur entière non négative de n). L'index du premier élément est 1, et n dans la formule commence à 0. Les valeurs A et B doivent être des entiers et peuvent être négatives. A définit la longueur du motif, et B définit le décalage.
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>Exemple des mots-clés « impair » et « pair » :
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>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 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>Pratique
Quelle affirmation est vraie concernant la pseudo-classe nth-last-child en CSS ?