Overview of What’s New with the :has() Selector

Unveiling the latest features of :has() in CSS

Known as “the parent selector,” the :has() pseudo-class has a far greater range than just styling an element’s ancestor. Now is a great time to become familiar with :has() and its use cases, given its availability in Safari 15.4+, Chromium 105+, and behind a flag in Firefox.

As a pseudo-class, the basic functionality of :has() is to style the element it’s attached to—otherwise known as the “target” element. This is similar to other pseudo-classes like :hover or :active , where a:hover is intended to style the <a> element in an active state.

However, :has() is also similar to :is() , :where() , and :not() , in that it accepts a list of relative selectors within its parentheses. This allows :has() to create complex criteria to test against, making it a very powerful selector.