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 <li> element if it has a child <ul> 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:

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

Using the has() selector, you can apply a blue background to all <li> elements under the <ul> with the class "main" that have child <ul> 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!