Comment fonctionne le sélecteur CSS `:last-child` et quand dois-je utiliser `:last-of-type` à la place ?

:last-child - Une surprise de sélection d'élément

:last-child est un sélecteur CSS qui vise à cibler le dernier élément d'un conteneur parent. C'est un outil puissant lorsqu'il est utilisé de manière appropriée, mais il est important de comprendre ses limites pour éviter des résultats inattendus.

Comme l'indique la documentation, :last-child cible le "dernier élément enfant d'un parent". Ce détail crucial passe souvent inaperçu, prêtant à confusion. Le sélecteur ne fonctionnera que si l'élément ciblé est le dernier absolu de son conteneur.

Considérez l'exemple HTML suivant :

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

Maintenant, imaginez que nous voulions styliser uniquement le dernier élément avec la classe "complete" en utilisant :last-child.

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

Malheureusement, cela ne fonctionnera pas car "2" n'est pas le dernier élément de la liste. Au lieu de cela, "4" est le dernier élément, qui n'a pas la classe "complete".

Pour éviter de tels incidents, il est important de se rappeler que :last-child ne s'appliquera que lorsque l'élément est le même dernier chez son parent. Si un élément n'est pas le dernier, sa couleur d'arrière-plan ne changera pas, comme le montre l'exemple ci-dessus.

Dans les situations où l'élément que nous voulons cibler n'est pas nécessairement le dernier, il est préférable d'utiliser :dernier du type. Ce sélecteur fera correspondre le dernier élément d'un type particulier au sein d'un parent, qu'il s'agisse ou non du tout dernier élément dans son ensemble.

Saisir les nuances de :last-child peut vous permettre d'exploiter efficacement ses capacités. C'est un sélecteur précieux pour cibler des éléments qui sont véritablement les derniers dans leurs conteneurs. Toutefois, si le sélecteur de dernier type répond mieux à vos besoins, n'hésitez pas à l'utiliser à la place.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!