Comment styliser un élément parent en fonction de ses éléments enfants avec CSS ?-tutoriel CSS-php.cn

Comment styliser un élément parent en fonction de ses éléments enfants avec CSS ?

Barbara Streisand

Libérer： 2024-11-28 17:45:17

original

819 Les gens l'ont consulté

How to Style a Parent Element Based on its Child Elements with CSS?

Comment appliquer un style à un élément parent s'il a un enfant avec CSS

Dans le développement Web, il est souvent nécessaire d'appliquer un style spécifique aux éléments en fonction de leur relation avec d'autres éléments du DOM. Un défi particulier consiste à styliser les éléments parents s'ils contiennent des éléments enfants.

Considérez la structure HTML suivante :

<ul class="main">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>
        <ul class="sub">
            <li>Sub Item 1</li>
            <li>
                <ul>
                    <li>Sub Sub Item 1</li>
                    <li>Sub Sub Item 2</li>
                    <li>Sub Sub Item 3</li>
                </ul>
            </li>
            <li>Sub Item 3</li>
            <li>Sub Item 4</li>
            <li>Sub Item 5</li>
        </ul>
    </li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

Copier après la connexion

Pour styliser en CSS le

les éléments qui ont un enfant

ul li:has(ul.sub) {
    background-color: yellow;
    border: 1px solid black;
}

Copier après la connexion

En appliquant les propriétés background-color et border aux éléments li qui répondent à la condition :has(ul.sub), vous pouvez les différencier de li qui n'ont aucun élément ul.sub enfant.

Il est important de noter que le sélecteur :has() n'est pas pris en charge dans tous les navigateurs, donc l'utilisation de cette approche peut nécessiter une compatibilité avec les navigateurs. considérations.

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!