Comment cibler efficacement le premier et le dernier enfant avec les pseudo-classes CSS ?

Comment cibler le premier et le dernier enfant en CSS

La sélection du premier et du dernier élément enfant à l'aide de CSS peut être délicate, car le "premier" -child" et "last-child" s'appliquent aux enfants immédiats d'un élément parent.

Dans le code CSS fourni, ciblant le premier et le dernier Les éléments enfants de la classe ".area" ne fonctionnent pas car les éléments ne sont pas des enfants directs d'un élément conteneur. Pour que la sélection fonctionne, vous pouvez ajouter un élément conteneur et spécifier ses enfants comme cible.

Voici un exemple qui inclut un élément conteneur :

.container {
  display: flex;
}

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

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

.container > .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>

Avec cette modification , les éléments ".area" deviennent des enfants directs de l'élément ".container", et les pseudo-classes "first-child" et "last-child" peuvent être utilisées pour sélectionner le premier et le dernier élément enfant. en conséquence.

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!