Comment puis-je sélectionner correctement le premier et le dernier élément enfant à l'aide de CSS ?

Sélection du premier et du dernier enfant avec CSS : comprendre le contexte

La sélection du premier ou du dernier enfant en CSS nécessite une compréhension claire du contexte dans lequel le CSS est appliqué. Comme le démontre l'extrait HTML et CSS fourni, l'application des pseudo-classes :first-child et :last-child directement aux éléments .area peut ne pas donner les résultats souhaités. En effet, ces pseudo-classes sélectionnent uniquement le premier et le dernier enfant de l'élément parent spécifié.

Dans l'exemple donné, les éléments .area ne sont pas les enfants d'un élément parent spécifié dans la structure HTML. Ce sont des enfants directs de l'élément body, qui peuvent contenir d'autres éléments, tels que des balises de script ou du contenu ajouté dynamiquement.

Pour sélectionner correctement le premier et le dernier enfant des éléments .area, un élément conteneur doit être introduit. En encapsulant les éléments .area dans un autre élément, tel qu'un div avec sa propre classe, les pseudo-classes peuvent cibler avec précision le premier et le dernier enfant de ce conteneur.

Voici une structure HTML modifiée qui démontre le bon utilisation :

<div class="container">
  <div class="area">1</div>
  <div class="area">2</div>
  <div class="area">3</div>
  <div class="area">4</div>
</div>

Avec cette structure, le CSS suivant sélectionnera correctement le premier et le dernier .area children :

.container .area:first-child {
  background-color: red;
}

.container .area:last-child {
  background-color: green;
}

En spécifiant l'élément conteneur comme sélecteur parent, le CSS peut désormais cibler avec précision le premier et le dernier enfant des éléments .area dans ce contexte.

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!