CSS can now use the :has() pseudo-class to reverse select the parent element according to the child element. 1. The syntax is parent:has(child), such as div:has(img) to add borders to divs containing pictures; 2. Support chain conditions such as section:has(h1, .highlight); 3. Common uses include adjusting layout according to videos, sidebar components, etc.; 4. Currently supports Chrome 105, Safari 15.4, and Edge 106, and Firefox does not currently support it, and it is necessary to provide a backup solution; 5. It is recommended to keep the conditions concise to avoid performance problems when using it.

Yes, CSS can finally target parent elements based on their children — and it's all thanks to the :has() pseudo-class. This selector lets you style a parent element if it contains a specific child or match a certain condition. It's a game-changer because for years, we've only been able to go from parent to child, never the other way around.

Now that major browsers like Chrome and Safari support :has() , it's time to see how it works in real use cases.

How to Use :has() to Style Parent Elements

The basic syntax looks like this:

 parent:has(child) {
  /* styles here */
}

For example, if you want to add a border to a <div> that contains an <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175164761778650.jpeg" class="lazy" alt="A practical CSS tutorial on the :has() parent selector" > , you'd write:

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

This means any div with an image inside will get that border. You're not styling the image — you're styling its container, which was tricky before without JavaScript.

You can also chain multiple selectors inside :has() :

 section:has(h1, .highlight) {
  background-color: #f0f0f0;
}

This section gets a light gray background if it has either an h1 or an element with the class .highlight .

Common Use Cases for :has() in Real Projects

Here are some situations where :has() really shines:

• Styling article containers differently when they include videos

   .article:has(video) {
  padding: 0;
  }

• Adjusting layout if a sidebar contains a specific widget

   .sidebar:has(.newsletter-signup) {
  background-color: #fff8e7;
  }

• Adding icons next to links that open in new tabs
  You can target anchor tags with a [target="_blank"] attribute:

   a[target="_blank"]:has(svg) {
  padding-right: 10px;
  }

These examples show how :has() helps reduce extra classes or JavaScript just to apply conditional styling based on content.

Browser Support and Fallbacks

Right now, :has() works in:

• Chrome 105
• Safari 15.4
• Edge 106

But it's not yet supported in Firefox (as of early 2025), so you need to plan accordingly.

If you're building a production site, consider these options:

• Use :has() but provide a fallback style that doesn't rely on it

• Detect browser support with @supports :

   @supports selector(:has(*)) {
  /* styles using :has() */
  }

• For unsupported browsers, fall back to adding a class via JavaScript:

   document.querySelectorAll('div').forEach(div => {
  if (div.querySelector('img')) {
    div.classList.add('has-img');
  }
  });

Keep in mind that even though :has() is powerful, it's still some experimental. So test carefully across browsers.

Final Notes on Using :has() Effectively

It might be tempting to overuse :has() , especially since it opens up new possibilities. But keep your selectors simple and avoid deeply nested conditions. For example:

 .container:has(.active):has(.highlight):has(ul)

That's valid, but hard to read and debug.

Stick to one or two conditions at most. Also, remember that :has() can slow things down a bit because the browser has to look inside elements to check for matches.

So while it's exciting and useful, treat it like any performance-sensitive feature — use it wisely.

Basically that's it.

The above is the detailed content of A practical CSS tutorial on the :has() parent selector. For more information, please follow other related articles on the PHP Chinese website!