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

Sélection du premier et du dernier élément enfant à l'aide de CSS

La sélection d'éléments enfants spécifiques sur une page Web peut être réalisée à l'aide de pseudo-classes CSS. Cependant, des défis potentiels surviennent lors de la tentative de sélection du premier ou du dernier enfant.

Un piège courant consiste à définir des styles directement sur les éléments enfants sans tenir compte de leur conteneur parent. Prenons l'exemple suivant :

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

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

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

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

Dans ce scénario, le CSS n'appliquera pas les styles souhaités au premier et au dernier élément enfant car ce ne sont pas des enfants directs du parent avec la classe Area. Pour résoudre ce problème, vous devez envelopper les éléments enfants dans un autre élément parent :

.container {
  . . .
}

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

Cette modification garantit que les règles CSS s'appliquent au premier et au dernier élément enfant de l'élément conteneur. En encapsulant les éléments dans un conteneur parent, vous définissez un contexte spécifique pour les éléments enfants cibles, vous permettant de les styliser avec précision en fonction de leur position dans ce conteneur.

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!