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

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

Linda Hamilton
Linda Hamiltonoriginal
2024-11-28 02:23:14653parcourir

How Can I Style a Parent Element Based on the Presence of a Child Element in 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn