Comment fonctionne le sélecteur CSS `:last-child` et quelles sont les alternatives ?

Spécificité du sélecteur CSS :last-child

Contexte :

Le sélecteur :last-child cible le dernier élément enfant d'un élément parent spécifique. Cependant, cela nécessite que l'élément enfant soit le tout dernier élément de ce conteneur.

Explication :

Considérez le sélecteur CSS suivant :

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

Ce sélecteur n'appliquera pas le style spécifié au dernier élément avec la classe "complete" s'il y a d'autres éléments présents après lui. Par exemple, dans le HTML fourni :

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

Le sélecteur :last-child n'appliquera pas le fond jaune au deuxième élément de la liste "complet" car ce n'est pas le dernier élément de la liste.

Alternatives :

Si vous devez appliquer un style au dernier élément avec une classe spécifique, quelle que soit sa position dans le conteneur, vous pouvez utilisez plutôt :last-of-type :

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

Ce sélecteur ciblera le dernier élément qui correspond à la classe "complete", même s'il y a d'autres éléments après lui.

De plus, vous pouvez utiliser le sélecteur « nième-enfant » pour cibler le dernier élément d'un type spécifique :

ul :nth-child(4) {
  background-color: yellow;
}

Cela sélectionnera le quatrième élément de la liste, quel que soit son class.

Considérations sur jQuery :

Le sélecteur jQuery $("li.complete:last-child") ne fonctionnera pas car il recherche le tout dernier élément dans l'élément parent. Pour cibler le dernier élément avec une classe spécifique à l'aide de jQuery, vous pouvez utiliser la fonction "last" :

$("li.complete").last();

Conclusion :

Le sélecteur :last-child nécessite que l'élément soit le tout dernier enfant de l'élément parent. Si ce n'est pas le cas, :last-of-type ou "nth-child" peuvent fournir des options plus appropriées.

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!