Comment styliser tous les éléments sauf le premier enfant dans les sélecteurs CSS imbriqués ?

Travailler avec des sélecteurs imbriqués : utiliser not:first-child

La sélection d'éléments spécifiques dans une structure imbriquée peut être un défi en CSS. Lorsque vous rencontrez un scénario dans lequel vous devez appliquer des styles à tous les éléments d'un groupe sauf le premier, le sélecteur not:first-child entre en jeu.

Une approche que vous avez tentée, div ul:not:first- enfant, ne fonctionne malheureusement pas. En effet, le sélecteur not:first-child attend un sélecteur simple comme argument, ce qui signifie que div ul n'est pas valide dans ce contexte.

La syntaxe correcte pour le sélecteur not:first-child est :

div ul:not(:first-child) {
    background-color: #900;
}

Ce sélecteur cible tout élément ul qui n'est pas le premier enfant de son div parent.

Cependant, pour la prise en charge des navigateurs existants ou pour contourner Limites du sélecteur :not, une technique alternative peut être utilisée :

1. Définissez une règle avec une portée plus large que prévu, en attribuant le style souhaité à tous les éléments.
2. Créez un plus règle spécifique avec une portée plus étroite.
3. Dans la règle la plus étroite, réinitialisez les propriétés de style à leurs valeurs par défaut pour les éléments qui répondent à une condition spécifique, comme être le premier enfant.

Par exemple, dans cet extrait de code, nous appliquons la couleur d'arrière-plan à tous les éléments ul, mais la deuxième règle remplace le style du premier élément enfant :

div ul {
    background-color: #900;
}

div ul:first-child {
    background-color: transparent;
}

En employant soit le sélecteur not:first-child, soit la technique alternative, vous pouvez cibler et styliser efficacement les éléments imbriqués sans affecter le premier enfant.

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!