Of all the latest and greatest CSS features, the “:has” pseudo-class wasn’t exactly sending a thrill up my leg. After having used it for a few months, however, I can’t deny that it’s incredibly handy. In this blog post, I'll show you some practical real-world problems I solved using “:has”, as well as some wild experiments that blew my mind!

Josh W. Comeau's platform provides resources in frontend development, React.js, and CSS, offering insightful articles, tutorials, and code examples. With a focus on accessible and creative web development techniques, Josh W. Comeau empowers developers to craft engaging user experiences and solve complex problems in the world of web development.

Josh W Comeau

The CSS :has pseudo-class is a new and powerful tool that enables styling of parent elements based on their children, working in a 'bottom-up' fashion. This capability opens up numerous possibilities, such as cleaner state-based styling and global event detection without JavaScript. Although it offers compelling advantages, its current 92% browser support necessitates fallback strategies. Practical examples demonstrate :has's ability to solve complex problems effortlessly, although in some cases JavaScript may still be more suitable. The post also showcases practical applications and experiments to highlight its versatility and utility.

The Undeniable Utility Of CSS <code>:has<

Link to this heading Styling based on states

Link to this heading The missing selector

Link to this heading The best tool for the job

İ dont know how can i express my emotions rn. This is killer. I was using JS to change parents style based on childrens state.
p:has([type=checkbox]:checked){
background:red
}
this lets me change parent based on child tag.
Awsome!

This is cool. I wanted to more directly share the example near the bottom so I made a codepin of it – <a href="https://codepen.io/garrypolley/full/rNERewo" target="_blank" rel="noopener nofollow">https://codepen.io/garrypolley/full/rNERewo</a>

Informative. Learned a new concept. Thnx