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:

<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

• 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!