Pourquoi `:last-child` ne sélectionne-t-il pas toujours le dernier élément d'un type spécifique ?

:last-child ne fonctionne pas comme prévu : comprendre les nuances

En CSS, le sélecteur :last-child est destiné à cibler l'élément enfant final au sein d'un parent spécifique. Cependant, comme le souligne l'exemple donné, ce sélecteur peut se comporter de manière inattendue lorsqu'il y a d'autres éléments présents au-delà de l'élément ciblé.

Le sélecteur :last-child ne s'appliquera à un élément que s'il s'agit du dernier élément absolu. dans son conteneur parent. Cela signifie que même si un élément est le dernier élément d'une classe ou d'un type spécifique, :last-child ne le sélectionnera pas s'il y a des éléments ultérieurs non correspondants.

Pour élucider ce comportement, considérez ce qui suit HTML et CSS :

<ul>
    <li class="complete">1</li>
    <li class="complete">2</li>
    <li>3</li>
    <li>4</li>
</ul>

li.complete:last-child {
    background-color: yellow;
}

Dans ce scénario, le sélecteur :last-child ne s'appliquera pas au