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

Styles CSS pour les parents avec des éléments enfants

Dans le développement Web, il peut être nécessaire d'appliquer des styles aux éléments parents selon qu'ils contiennent ou non des éléments enfants. En utilisant purement CSS, cela peut être réalisé via le sélecteur has().

ul li:has(ul.sub) {
    /* Styles for parent li elements with child ul elements with class "sub" */
}

Ici, le sélecteur has() est utilisé pour cibler les éléments parent li (ceux dans l'ul element) qui ont un élément child ul avec la classe "sub". Ces éléments parents li peuvent ensuite être stylisés en conséquence.

Exemple HTML :

<ul class="main">
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa
        <ul class="sub">
            <li>bbbb</li>
            <li>bbbb
                <ul>
                    <li>cccc</li>
                    <li>cccc</li>
                    <li>cccc</li>
                </ul>
            </li>
            <li>bbbb</li>
            <li>bbbb</li>
            <li>bbbb</li>
        </ul>
    </li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
</ul>

Exemple CSS :

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

Avec ce CSS, tous les éléments li parents de la liste principale qui contiennent une sous-liste auront une couleur de fond bleu clair.

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!