A Practical Guide to the CSS :has() Selector: Selecting Parents Without JavaScript

CSS's long-awaited "parent selector"

For a long time, CSS selectors could only go downward. You could select a child inside a parent with .card img, but there was no way to select a parent based on its children, like "a card that has an image."

So code like this was everywhere:

// Add a class to the parent card when its checkbox is checked
checkbox.addEventListener("change", (e) => {
  e.target.closest(".card").classList.toggle("is-selected", e.target.checked);
});

With :has(), that becomes one line of CSS:

.card:has(input:checked) {
  border-color: orange;
}

A:has(B) selects "an A that contains a B." The style applies to the outer element that satisfies the condition in the parentheses.

The parentheses can describe siblings as well as descendants, so it effectively works as a "conditional selector."

Let's try some practical examples. In each one, the top is the live result and the tabs below show the code.

Example 1. Cards that highlight when selected

You see this UI on pricing pages all the time: pick a radio button and the whole card is highlighted. There's no JavaScript at all.

It all comes down to the last rule: select the .plan that has an input:checked.

Example 2. The whole form reacts to a bad input

:has() pairs especially well with form state. In the example below, type anything into the email field and then click somewhere else.

The state of a single input changes the label, the form border, the hint, and the button all at once. This used to mean listening for input events, building state, and toggling classes on each element.

Example 3. Selecting previous siblings: a star rating

CSS's ~ and + combinators can only select following siblings. That's why it was hard to color "the hovered star and the stars before it" in a star rating. With :has(), you can select backwards too. Hover over the stars.

The result: stars fill up to the one you're hovering. You can also express it directly with sibling relationships:

/* An element whose very next sibling is hovered = the sibling right before the hovered one */
li:has(+ li:hover) {
  transform: scale(1.1);
}

That's how you build a macOS Dock-style effect where the icons on either side of the hovered one grow too.

Example 4. Changing layout based on item count

Conditions like "two columns once there are four or more items" are possible in pure CSS. Use the buttons below to add and remove items. (JavaScript only adds and removes items; CSS handles the layout switch.)

It uses :has() to ask whether li:nth-child(4) exists. This technique is known as a quantity query.

Example 5. Changing page-wide state

Put :has() on html or body and any element anywhere on the page can become the condition.

/* Lock background scrolling while a modal is open */
body:has(dialog[open]) {
  overflow: hidden;
}

/* Switch the whole page's colors when the dark mode checkbox is checked */
html:has(#dark-mode:checked) {
  color-scheme: dark;
  background: #111;
  color: #eee;
}

You can delete the code that sets document.body.style.overflow = "hidden" every time a modal opens and resets it when it closes.

Before you use it

Browser support

:has() is supported from Chrome/Edge 105, Safari 15.4, and Firefox 121, so it's been usable in all major browsers since late 2023. If you need to support older browsers, wrap it in @supports so it only applies where it works.

@supports selector(:has(a)) {
  .plan:has(input:checked) { border-color: #f59e0b; }
}

Things to watch out for

Summary: why this is worth knowing

The real value of :has() is that it lets you delete JavaScript whose only job is adding and removing classes to reflect state. The state is already in the HTML: whether something is checked (:checked), whether an input is invalid (:user-invalid), whether the mouse is over it (:hover), whether it's open ([open]). :has() lets CSS read that state directly. Next time you reach for classList.toggle, check first whether CSS can do it.