How Can I Style a Parent Element Based on the Presence of a Child Element in CSS?

Apply Style to Parent Based on Child Presence Using CSS

When working with nested elements, it can be desirable to apply styles to the parent based on whether it contains child elements. CSS provides a limited solution for this purpose.

Using ':has()' Selector

The :has() selector can be used to select elements that contain a specific child element. For instance, to apply styling to a parent li element if it contains a ul.sub child:

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

Limitations

Unfortunately, the :has() selector is only supported in CSS4 and is not widely adopted by browsers.

Alternative with JavaScript

As an alternative, you can achieve the desired effect using JavaScript:

$('ul li:has(ul.sub)').addClass('has_sub');

Then, add styling for the li.has_sub class in your CSS.

Note:

The strikethrough section in the original answer proposed using the $ selector, which is a CSS4 proposal but is not supported by any browsers currently.

The above is the detailed content of How Can I Style a Parent Element Based on the Presence of a Child Element in CSS?. For more information, please follow other related articles on the PHP Chinese website!