Comment puis-je sélectionner de manière fiable le premier et le dernier élément enfant avec CSS ?

Requête de sélection CSS du premier et du dernier enfant

Lorsque vous essayez de sélectionner le premier et le dernier élément enfant à l'aide de CSS, les pseudo- :first-child et :last-child les classes peuvent ne pas fonctionner comme prévu, en particulier lorsque les éléments cibles sont des enfants directs de l'élément body.

Pour résoudre ce problème, il est recommandé d'envelopper les éléments cibles dans un élément conteneur. Ce faisant, les première et dernière pseudo-classes enfants peuvent être appliquées aux éléments cibles au sein du conteneur.

.container {
  /* Style rules for the container element */
}

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

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

Dans cette solution, l'élément .container sert de point de référence pour sélectionner le premier et derniers éléments enfants. Cela garantit que les pseudo-classes s'appliquent correctement aux éléments cibles 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!