Comment puis-je styliser un élément parent en fonction de la présence d'un élément enfant en CSS ?

Appliquer le style au parent en fonction de la présence de l'enfant à l'aide de CSS

Lorsque vous travaillez avec des éléments imbriqués, il peut être souhaitable d'appliquer des styles au parent selon qu'il contient ou non des éléments enfants. CSS fournit une solution limitée à cet effet.

Utilisation du sélecteur ':has()'

Le sélecteur :has() peut être utilisé pour sélectionner des éléments qui contiennent un élément enfant spécifique. Par exemple, pour appliquer un style à un élément parent li s'il contient un enfant ul.sub :

ul li:has(ul.sub) {
    background-color: green;
}

Limitations

Malheureusement, le sélecteur :has() n'est pris en charge qu'en CSS4 et n'est pas largement adopté par les navigateurs.

Alternative avec JavaScript

Comme alternative, vous pouvez obtenir l'effet souhaité en utilisant JavaScript :

$('ul li:has(ul.sub)').addClass('has_sub');

Ensuite, ajoutez un style pour la classe li.has_sub dans votre CSS.

Remarque :

La section barrée dans la réponse originale proposée à l'aide du sélecteur $, qui est un Proposition CSS4 mais n'est actuellement prise en charge par aucun navigateur.

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!