How Can I Style a Parent Element Based on its Child Elements Using CSS?

Apply Style to Parent if it Has Child Using CSS

As a web developer, you may encounter situations where you need to apply styles to a parent element based on the presence of specific child elements. While this may seem like a straightforward task, achieving it solely with CSS can be a challenge.

Fortunately, CSS provides selectors that can help you achieve this:

has() Selector:

The has() selector allows you to select an element that contains a specific child element. For example, to apply a style to a parent

element if it has a child

element with the class "sub," you can use the following CSS:

ul li:has(ul.sub) {
  /* Your styles here */
}

Example:

Consider the following HTML structure:

• Item 1
• Item 2
• Item 3
  • Sub Item 1
  • Sub Item 2
  • Sub Item 3
• Item 4
• Item 5

Using the has() selector, you can apply a blue background to all

elements under the

with the class "main" that have child
elements with the class "sub":

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

Note: The has() selector is not supported by all browsers. If you need broader browser support, you may consider using a JavaScript solution instead.

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