:nth-last-child

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La fonction depseudo-classe CSS:nth-last-child permet de cibler les éléments qui possèdentan+b-1 nœud frères qui les suivent pour un même élément parent avec un indice n entier qui est incrémenté à partir de 0. Avec CSS3, il était nécessaire que l'élément ciblé ait un élément parent, cette restriction a été levée en CSS4.

Exemple interactif

p {  font-weight: bold;}li:nth-last-child(-n + 3) {  border: 2px solid orange;  margin-top: 1px;}li:nth-last-child(even) {  background-color: lightyellow;}

<p>Les huit incendies de forêt les plus meurtriers&nbsp;:</p><ol reversed>  <li>Feu de Matheson</li>  <li>Feu de Miramichi</li>  <li>Feux de 1997 en Indonésie</li>  <li>Feu de Thumb</li>  <li>Feu de Great Hinckley</li>  <li>Feu de Cloquet</li>  <li>Feu de Kursha-2</li>  <li>Feu de Peshtigo</li></ol>

Syntaxe

css

:nth-last-child(<nth> [of <complex-selector-list>]?) {  /* ... */}

Parameters

La pseudo-classenth-last-child prend un seul argument qui représente le motif de répétition des éléments ciblés, compté à partir de la fin.

Valeurs avec un mot-clé

odd: Représente les éléments dont la position est impaire par rapport à leurs voisins lorsqu'elle est comptée depuis la fin.
even: Représente les éléments dont la position est paire par rapport à leurs voisins lorsqu'elle est comptée depuis la fin.

Notation fonctionnelle

<An+B>: Représente les éléments dont la position, à partir de la fin, est laAn+B-ième avecn qui parcourt les entiers à partir de 0. Les valeurs fournies pourA etB doivent être des entiers<integer>.

La syntaxe`of <selector>`

En passant un sélecteur en argument, nous pouvons sélectionner len-ième dernier élément qui correspond à ce sélecteur. Par exemple, le sélecteur suivant correspond aux trois derniers éléments de listeimportants, qui sont assignés avecclass="important".

css

:nth-last-child(-n + 3 of li.important) {}

Note :Cela est différent de déplacer le sélecteur en dehors de la fonction, comme :

css

li.important:nth-last-child(-n + 3) {}

Ce sélecteur applique un style aux éléments de liste s'ils font également partie des trois derniers enfants.

Exemples

Exemple de sélecteurs

tr:nth-last-child(odd) outr:nth-last-child(2n+1): Représente les lignes impaires d'un tableau HTML : 1, 3, 5, etc., en partant de la fin.
tr:nth-last-child(even) outr:nth-last-child(2n): Représente les lignes paires d'un tableau HTML : 2, 4, 6, etc., en partant de la fin.
:nth-last-child(7): Représente le septième élément, en partant de la fin.
:nth-last-child(5n): Représente les éléments 5, 10, 15, etc., en partant de la fin.
:nth-last-child(3n+4): Représente les éléments 4, 7, 10, 13, etc., en partant de la fin.
:nth-last-child(-n+3): Représente les trois derniers éléments parmi un groupe de frères.
p:nth-last-child(n) oup:nth-last-child(n+1): Représente chaque élément<p> parmi un groupe de frères. Cela est identique à un simple sélecteurp. (Puisquen commence à zéro, tandis que le dernier élément commence à un,n etn+1 sélectionneront tous deux les mêmes éléments.)
p:nth-last-child(1) oup:nth-last-child(0n+1): Représente chaque<p> qui est le premier élément parmi un groupe de frères, en partant de la fin. Cela est identique au sélecteur:last-child.

Exemple de tableau

HTML

html

<table>  <tbody>    <tr>      <td>Première ligne</td>    </tr>    <tr>      <td>Deuxième ligne</td>    </tr>    <tr>      <td>Troisième ligne</td>    </tr>    <tr>      <td>Quatrième ligne</td>    </tr>    <tr>      <td>Cinquième ligne</td>    </tr>  </tbody></table>

CSS

css

table {  border: 1px solid blue;}/* Sélectionne les trois derniers éléments */tr:nth-last-child(-n + 3) {  background-color: pink;}/* Sélectionne chaque élément à partir de l'avant-dernier */tr:nth-last-child(n + 2) {  color: blue;}/* Sélectionne uniquement l'avant-dernier élément */tr:nth-last-child(2) {  font-weight: 600;}

Résultat

Requêtes de quantité

La mise en formequantity query des éléments dépend du nombre d'entre eux. Dans cet exemple, les éléments de liste deviennent rouges lorsqu'il y en a au moins trois dans une liste donnée. Cela est accompli en combinant les capacités de la pseudo-classenth-last-child et ducombinator de frère suivant.

HTML

html

<h4>Une liste de quatre éléments (avec style)&nbsp;:</h4><ol>  <li>Un</li>  <li>Deux</li>  <li>Trois</li>  <li>Quatre</li></ol><h4>Une liste de deux éléments (sans style)&nbsp;:</h4><ol>  <li>Un</li>  <li>Deux</li></ol>

CSS

css

/* Si il y a au moins trois éléments de liste,   appliquez-leur tous un style */li:nth-last-child(n + 3),li:nth-last-child(3) ~ li {  color: red;}

Résultat

Exemple de syntaxe`of <selector>`

Dans cet exemple, il y a une liste non ordonnée de noms. Certains éléments ont une classenoted appliquée et sont ensuite mis en surbrillance avec une bordure inférieure épaisse.

HTML

html

<ul>  <li>Diego</li>  <li>Shilpa</li>  <li>Caterina</li>  <li>Jayla</li>  <li>Tyrone</li>  <li>Ricardo</li>  <li>Gila</li>  <li>Sienna</li>  <li>Titilayo</li>  <li>Lexi</li>  <li>Aylin</li>  <li>Leo</li>  <li>Leyla</li>  <li>Bruce</li>  <li>Aisha</li>  <li>Veronica</li>  <li>Kyouko</li>  <li>Shireen</li>  <li>Tanya</li>  <li>Marlene</li></ul>

CSS

css

* {  font-family: sans-serif;}ul {  display: flex;  flex-wrap: wrap;  list-style: none;  font-size: 1.2rem;  padding-left: 0;}li {  margin: 0.125rem;  padding: 0.25rem;  border: 1px solid tomato;}.noted {  border-bottom: 5px solid tomato;}

Dans le CSS suivant, nous ciblons les éléments de listeimpairs qui sont marqués avecclass="noted".

css

li:nth-last-child(odd of .noted) {  background-color: tomato;  border-bottom-color: seagreen;}

Résultat

Les éléments avecclass="noted" ont une bordure inférieure épaisse et les éléments 1, 7, 14 et 20 ont un fond solide car ce sont les éléments de listeimpairs avecclass="noted".