Learn the ins and outs of `:has()` which is the new CSS relational selector for selecting parents, siblings, and other unique combinations.

MystPi

Gleam

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

CSS:has() is behind a flag in Firefox and supported in Chrome, Edge, and Safari. It can match an ancestor element based on containing a specific descendant, but it can also match antecedent elements based on subsequent content. In the following pseudo-code, you can select any that has a later sibling.

12 Days of Web

<p>Very powerful selector imo, thanks for sharing and for the detailed explanation!</p>
