:nth-last-child()

Valeurs

• 1 – le dernier élément (comme :last-child).
• -n+2 – les deux derniers.
• n+2 – tous sauf le dernier.
• odd, even, An+B of S – comme pour :nth-child(), comptés depuis la fin.

Exemples

Les deux derniers éléments sont gris :

<ul class="list">
  <li>Janvier</li>
  <li>Février</li>
  <li>Mars</li>
  <li>Avril</li>
</ul>

.list {
  margin: 0;
  padding-left: 20px;
}
.list li:nth-last-child(-n+2) { color: #999; }

Un style selon le nombre d’éléments : quand la liste en a au moins quatre, la police de tous diminue. Un premier élément qui est aussi le quatrième ou plus depuis la fin n’existe que dans une liste de quatre éléments ou plus ; ~ sélectionne alors aussi les autres :

<ul class="tags">
  <li>CSS</li>
  <li>HTML</li>
</ul>
<ul class="tags">
  <li>CSS</li>
  <li>HTML</li>
  <li>PHP</li>
  <li>MySQL</li>
</ul>

.tags {
  display: flex;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.tags li {
  padding: 4px 10px;
  border-radius: 12px;
  background: #e3f2fd;
  font-size: 16px;
}
.tags li:first-child:nth-last-child(n+4),
.tags li:first-child:nth-last-child(n+4) ~ li {
  font-size: 12px;
}

Avec :has(), la même chose s’écrit plus lisiblement : .tags:has(> li:nth-child(4)) li { font-size: 12px; }.

Points d’attention

• Comme pour :nth-child(), tous les frères comptent, même d’un autre type et masqués.
• Dès qu’un autre élément s’ajoute à la fin du parent, les positions depuis la fin se décalent pour tous – la règle concerne alors d’autres éléments.
• Le calcul inversé se confond facilement : :nth-last-child(n+2) désigne tous les éléments sauf le dernier, et non « à partir du deuxième ».

Prise en charge par les navigateurs

Baseline – largement disponible : fonctionne dans tous les navigateurs courants, et depuis longtemps (au plus tard depuis 2015). Depuis la version : Chrome 4, Firefox 3.5, Safari 3.1. État : octobre 2026 (MDN browser-compat-data).

Voir aussi :
:nth-child()
:last-child
:has()
Combinateur de voisins généraux (~)
:nth-of-type()