The :has() pseudo-class is powerful but its browser support varies. Modern browsers have started supporting it, but older browsers and some versions may not recognize it yet.

Current Browser Support

1
Fully supported in the latest versions of Chrome, Edge, Safari, and Opera.
2
Firefox started supporting it experimentally in newer versions, but it may require enabling a flag or be limited in some releases.
3
Internet Explorer and very old browser versions do not support :has().
4
Always test critical use cases and provide fallbacks or progressive enhancement for unsupported browsers.

Because :has() can affect styling dynamically based on child elements, you may want to use feature queries (@supports) or fallback styles to ensure a good user experience in browsers that do not support it.

Example: Using @supports for Fallback

Best Practices

1
Check browser compatibility before using :has() in production projects.
2
Use feature queries (@supports) to apply styles only when supported.
3
Consider progressive enhancement so that the UI works even without :has().
4
Test on multiple browsers to ensure consistent appearance and functionality.

Difficulty: 6/10

Topics: CSS selector support, browser compatibility, feature detection

Scenario Questions

0-2 years experience

1
You're building a card component that highlights parent containers when a button inside is hovered — you used :has() but it doesn't work in Chrome. What do you check first?
2
Your teammate says :has() works fine in their browser, but your design breaks. What’s the most likely reason, and how would you verify it?

2-5 years experience

1
A user reports that the 'selected' state on a navigation menu isn't showing up on their iPhone — you used :has() to style the parent based on child state. How do you debug this?
2
You're implementing a dynamic form validation UI using :has() to style parent fields when inputs are invalid. QA finds it doesn't work on Android Chrome 90. What’s your plan to fix it without rewriting the entire component?

5-8 years experience

1
You’re designing a reusable component library that uses :has() for advanced parent-child styling. How do you balance modern CSS elegance with supporting legacy enterprise clients on outdated browsers?
2
Your team wants to adopt :has() to reduce JavaScript-driven DOM manipulation for hover states. What performance, maintenance, and compatibility tradeoffs would you evaluate before committing?

8+ years experience

1
Your company’s flagship product still supports IE11 and iOS 13, but engineering wants to migrate to :has() for cleaner CSS. How do you structure a phased migration plan that minimizes user impact and technical debt?
2
You’re leading a cross-team initiative to standardize CSS architecture. How do you advocate for or against adopting :has() given its inconsistent browser support, and what metrics would you use to justify the decision?

Follow-up Questions

❓How would you detect if :has() is supported at runtime?
❓What fallback would you implement for older browsers when using :has() for visual state indicators?
❓Have you ever shipped a feature that broke because of missing :has() support?