Comment puis-je styliser les éléments parents en fonction de leurs éléments enfants en CSS ?

Éléments de style basés sur des éléments enfants en CSS

Lors de la conception de pages Web, il peut être utile de styliser les éléments en fonction des éléments enfants qu'ils contenir. Bien que CSS ne dispose actuellement pas de la pseudo-classe ":containing" pour répondre directement à cette exigence, il existe une solution alternative disponible : la pseudo-classe ":has".

Utilisation du pseudo-classe ":has" Classe :

La pseudo-classe ":has" permet d'appliquer des styles à un élément uniquement lorsqu'il contient un élément enfant spécifique. La syntaxe de ":has" est la suivante :

div:has(child-element) {
  styles
}

Exemple d'utilisation :

En utilisant la pseudo-classe ":has", nous pouvons définir des styles pour un élément parent basé sur les éléments enfants qu'il contient. Par exemple :

div:has(div.a) {
  border: solid 3px red;
}

div:has(div.b) {
  border: solid 3px blue;
}

Dans ce code, la première règle cible tout élément "div" qui contient un élément enfant avec la classe "a" et lui ajoute une bordure rouge. De même, la deuxième règle applique une bordure bleue aux éléments "div" qui contiennent un élément enfant avec la classe "b".

Conclusion :

Alors que le " : contenant" n'existe pas en CSS, la pseudo-classe ":has" fournit une alternative viable pour appliquer des styles aux éléments parents en fonction de leurs éléments enfants. En tirant parti de ":has", les développeurs peuvent améliorer la flexibilité et l'expressivité de leurs styles CSS.

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!