The :has() pseudo-class in CSS allows targeting a parent element based on its child elements. It works by using the syntax parent:has(child-selector) to apply styles conditionally. For example, div:has(img) applies styles to a div containing an image. Multiple selectors can be used with commas like div:has(img, p.special). Common use cases include styling containers, form validation feedback, and indicating menu items with submenus. Browser support is available in modern browsers like Chrome, Safari, and Edge, though Firefox lacks support as of late 2024. Considerations include performance impact, non-dynamic behavior, and the need for fallbacks in unsupported environments.

The :has() pseudo-class is a powerful CSS selector that allows you to target a parent element based on the presence of specific child elements or conditions within it. Before :has() was introduced, there was no native way in CSS to select a parent based on its children — developers had to rely on JavaScript or add extra classes manually. Now, with :has(), this becomes possible using just CSS.

How to Use :has() in CSS

:has() works by taking a selector as an argument and matching any element that contains at least one matching element inside it. The syntax looks like:

parent:has(child-selector) {
  /* styles */
}

For example, if you want to style a <div> only when it contains an <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175251076578590.jpeg" class="lazy" alt="Describe the `:has()` pseudo-class (Parent selector)" >, you can write:

div:has(img) {
  border: 2px solid green;
}

This will apply the border only to those div elements that directly contain an image tag somewhere inside them.

You can also chain multiple selectors inside :has() using commas, like:

div:has(img, p.special) {
  background-color: #f0f0f0;
}

This rule will match any div that has both an img and a p with class special.

Common Use Cases for :has()

• Styling containers conditionally: For example, applying different padding or margins to a card layout only when it includes a video.
• Form validation feedback: Highlighting a form group when a required input is invalid.
• Menu items with submenus: Applying arrows or indicators only to menu items that have nested lists.

Here's a real-world example:

li:has(ul) {
  position: relative;
  padding-right: 20px;
}

li:has(ul)::after {
  content: ' ?';
  position: absolute;
  right: 5px;
}

This adds a dropdown indicator to any list item that contains a submenu (<ul></ul>), making your navigation UI more intuitive without adding extra markup.

Browser Support and Considerations

As of now, :has() is supported in most modern browsers like Chrome (v105 ), Safari (v15.4 ), and Edge (v106 ). Firefox support is still pending as of late 2024, so it’s important to check compatibility if you're targeting a broad audience.

Also, keep in mind:

• :has() can affect performance if used excessively or with complex selectors.
• It's not dynamic in the same way JavaScript is — it only evaluates at render time.
• Avoid using it in critical layouts unless fallbacks are in place for unsupported browsers.

If you're using it in production, consider feature detection or progressive enhancement strategies to ensure your site remains usable everywhere.

Basically, :has() gives CSS a long-missing tool for conditional styling based on structure. While it’s not yet universally supported, it's definitely worth experimenting with and planning for future use.

The above is the detailed content of Describe the `:has()` pseudo-class (Parent selector). For more information, please follow other related articles on the PHP Chinese website!