Comment styliser tous les enfants sauf le dernier enfant en CSS ?

Utiliser CSS pour sélectionner les enfants à l'exception du dernier enfant

Dans le développement Web, en particulier en utilisant CSS, il peut y avoir des cas où vous souhaitez appliquer styles à tous les enfants d’un élément à l’exception du dernier enfant. Ceci peut être réalisé en utilisant la pseudo-classe de négation de CSS Selectors Level 3.

Syntaxe :

:not(:last-child) { /* styles */ }

Comment ça marche :

La pseudo-classe :not() vous permet d'exclure les éléments qui correspondent à un sélecteur spécifié. Dans ce cas, nous l'utilisons pour nier la pseudo-classe :last-child, qui sélectionne le dernier élément enfant.

Exemple :

Considérez la structure HTML suivante :

<div>
  <div>First child</div>
  <div>Second child</div>
  <div>Third child</div>
</div>

Pour styliser tous les enfants sauf le dernier enfant, vous pouvez utiliser le CSS suivant :

:not(:last-child) {
  background-color: blue;
}

Cela appliquera une couleur de fond bleue aux deux premiers enfants, mais pas le troisième enfant.

Compatibilité :

Il convient de noter que la pseudo-classe :not() n'est pas prise en charge dans Internet Explorer 8 ou les navigateurs antérieurs.

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!