Comment puis-je sélectionner correctement le premier et le dernier élément enfant avec CSS ?

Résoudre les problèmes CSS lors de la sélection du premier et du dernier élément enfant

Lorsque vous êtes confronté à des difficultés lors de la sélection du premier et du dernier élément enfant à l'aide de CSS, il est essentiel de considérer le contexte de votre code. Dans le Fiddle fourni, les éléments .area sont des enfants directs du étiqueter. Cependant, pour appliquer correctement les pseudo-classes :first-child et :last-child, il est crucial de s'assurer que les éléments .area sont imbriqués dans un conteneur.

Pour résoudre ce problème, ajoutez un élément conteneur autour vos éléments .area. Cela fournira un contexte approprié dans lequel identifier le premier et le dernier élément enfant en fonction de leur position dans le conteneur.

Voici une version révisée de votre code :

.container {
  display: flex;
}

.area {
  height: 100px;
  width: 100px;
}

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

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

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

En imbriquant les éléments .area dans le .container, vous établissez une hiérarchie claire. Les pseudo-classes :first-child et :last-child peuvent désormais cibler avec précision le premier et le dernier élément enfant du .container.

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!