How Can I Style Parent Elements Based on Their Child Elements Using Only CSS?

CSS Styles for Parents with Child Elements

In web development, it can be necessary to apply styles to parent elements based on whether they contain child elements. Using purely CSS, this can be achieved through the has() selector.

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

Here, the has() selector is used to target the parent li elements (those within the ul element) that have a child ul element with the class "sub". Such parent li elements can then be styled accordingly.

Example 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>

Example CSS:

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

With this CSS, all parent li elements within the main list that contain a sub list will have a light blue background color.

The above is the detailed content of How Can I Style Parent Elements Based on Their Child Elements Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!