For the longest time, people were asking for a parent selector in CSS, and at first glance, that’s what :has() is, but it’s also a lot more than that.

It definitely can be a parent selector, though.

For example, you can select the direct parent of any element that has a form in it like this:

:has(> form) {
  ...;
}

But it’s much more than just a parent selector, because we can use it to select elements based on what comes after them:

.title {
  margin-block-end: 2rem;
}

.title:has(+ .subtitle) {
  margin-block-end: 0.5rem;
}

Or, we can select all the siblings of an element:

.gallery:has(> img:hover) > img:not(:hover) {
  filter: grayscale(1);
}

And so much more.

If you haven’t experimented with :has() yet, I really would encourage you to see what it can do, because it opens up a lot of really awesome possibilities.

If you’d like to read about it in more detail, including some interactive examples, here are some great posts:

• The Undeniable Utility Of CSS :has by Josh Comeau
• Level Up Your CSS Skills With The :has() Selector by Stephanie Eckles
• The CSS :has Selector (and 4+ Examples) by Robin Rendle

And I’ve made a few videos exploring what you can do with it as well:

• This video looks at the basics, and similar examples to what I shared above above (and a few other things)
• This video looks at how we can use :has() for theming, counting children, and more.