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

Comprendre le sélecteur :last-child

Le sélecteur :last-child est utilisé pour cibler le dernier élément enfant d'un parent . Cependant, il y a quelques subtilités importantes à prendre en compte dans son utilisation.

Exclusion d'éléments en dehors du parent direct

Un point crucial à noter est que le Le sélecteur :last-child ne ciblera pas les éléments s'ils ne sont pas le dernier enfant de leur parent immédiat. Cela signifie que si un élément a d'autres frères et sœurs, imbriqués ou non, :last-child ne s'appliquera pas à lui.

Example

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, aucun élément li avec la classe "complete" aura un fond jaune. C'est parce qu'ils ne sont pas le tout dernier enfant du groupe

élément. Le
• L'élément avec la valeur "4" vient après le deuxième "complet"
• , ce qui en fait le dernier enfant.

  Sélecteurs alternatifs

  Pour cibler le dernier enfant d'un groupe d'éléments frères, :last-of-type peut être utilisé à la place. Il sélectionne la dernière instance d'un type d'élément au sein de son parent, quels que soient les autres éléments présents.

  JQuery Considérations

  Le sélecteur jQuery $("li. complete:last-child") ne ciblera pas non plus l'élément souhaité, car il se comporte de la même manière que le sélecteur CSS. Cependant, $("li.complete").last() sélectionnera le dernier élément de la liste, quelle que soit sa position par rapport aux autres frères et sœurs.

  Conclusion

  Comprendre les nuances de :last-child est essentiel pour un ciblage précis des éléments. Assurez-vous toujours que l'élément est le dernier enfant de son parent direct si vous avez l'intention d'utiliser ce sélecteur. Alternativement, :last-of-type peut être un choix utile lors de la sélection de la dernière instance d'un type d'élément dans un conteneur parent.

  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!