:has()

The CSS :has() pseudo-class selects elements that contain other elements that match the selector passed into its arguments. It’s often referred to as “the parent selector” because of its ability to select a parent element based on the child elements it contains and apply styles to the parent.

/* Select the .card element when it 
   contains a <figure> immediately
   followed by a paragraph. */
.card:has(figure + p) {
  flex-direction: row;
}

This example selects an element with the .card class when it contains a <figure> element that is immediately followed by a <p> element:

<article class="card">
  <figure></figure>
  <p></p>
</article>

This is incredibly useful to write styles for components that may or may not contain certain elements inside, such as a card grid where a card item always has a paragraph, but might not have an image that accompanies it.

That way, in situations where you do not always know what the markup includes, you can still write styles that match those conditions.

:has() is defined in the Selectors Level 4 specification where it is described as “the relational pseudo-class” because of its ability to match selectors based on an element’s relationship to other elements.

Basic usage

The following HTML contains two <button> elements. One of them has an SVG icon.

<!-- Plain button -->
<button>Add</button>

<!-- Button with SVG icon -->
<button>
  <svg></svg>
  Add
</button>

Now, let’s say, you want to apply styles only to the <button> that has an <svg> element inside of it.

:has() is perfectly suited for the job:

button:has(svg) {
  /* Styles */
}

The :has() selector gives us the ability to distinguish between a button that has a descendant <svg>, and one that doesn’t.

Syntax

:has( <unforgiving-relative-selector-list> )

A unforgiving selector list refers to the arguments that are passed into the :has() selector’s arguments, which is a comma-separated list of elements that are evaluated together based on their relationship to the parent element.

article:has(ol, ul) {
  /* Matches an <article> that contains either
     an ordered or unordered list. */
}

We’ll break down the argument list’s “unforgiving” nature in greater detail in just a bit.

Specificity

One of the more interesting aspects of :has() is that its specificity is determined by the most specific element in its argument list. Say we have the following style rules:

article:has(.some-class, #id, img) {
  background: #000;
}

article .some-class {
  background: #fff;
}

We have two rules, both selecting an <article> element to change its background. Which background does this HTML get?

<article class="some-class">
  <div class="some-class"></div>
</article>

You might think it gets a white (#fff) background because it comes later in the cascade. But since the argument list for :has() includes other selectors, we have to consider the most specific one in the list to determine the real specificity of that first rule. That would be #id in this case.

Let’s compare them:

• article .some-class generates a score of (0,1,1)
• article:has(.some-class, #id, img) generates a score of (1,0,1)

The first rule wins! The element gets a black (#000) background.

article:has(h1, .title) a { 
  color: red; 
}

article h1 a {
  color: green;
}

/* Specificity: (0,1,2) */
article:has(h1, .title) a {
  color: red; /* 🏆 Winner! */
}

/* Specificity: (0,0,3) */
article h1 a {
  color: green;
}

:has() is an “unforgiving” selector

The first draft of specifications introduced :has() as a “forgiving selector”:

:has( <forgiving-relative-selector-list> )

The idea being that a list can contain an invalid selector and ignore it.

/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }

::-scoobydoo is a completely made-up invalid pseudo-element that doesn’t exist. If :has() was a “forgiving”, that bogus selector would simply be ignored while the rest of the arguments are parsed as normal.

But later on, due to a conflict with jQuery’s behavior, the spec authors decided to define :has() as a non-forgiving selector. As a result, :is() and :where() are the only forgiving relative selectors of the bunch.

That means :has() behaves a lot more like a compound selector. According to CSS specifications, for legacy reasons, the general behavior of a compound selector is that if any selector in the list is invalid, the entire selector list is invalid, resulting in the entire rule set being thrown out.

/* This doesn't do anything because `::-scoobydoo`
   is an invalid selector */
a, a::-scoobydoo {
  color: green;
}

The same is true of :has(). Any invalid selector in its argument list will invalidate everything else in the list. So, that example we looked at earlier:

/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }

…won’t do anything at all. All three selectors in the argument list are invalidated because of that invalid ::scoobydoo selector. It’s an all-or-nothing sort of thing.

But there’s kind of a workaround for this. Remember, :is() and :where() are forgiving, even if :has() is not. That means we can nest either of the those selectors in :has() to get more forgiving behavior:

p:has(:where(a, a::scoobydoo)) {
  color: green;
}

So, if you ever want the :has() to work as a “forgiving” selector, try nesting :is() or :where() inside of it.

The argument list accepts complex selectors

A complex selector contains one or more compound selectors (e.g. a.fancy-link) and combinators (e.g. >, +, ~). The argument list for :has() accepts these comple selectors and can be used to identify relationships between multiple elements.

<relative-selector> = <combinator>? <complex-selector>

Here is an example of a relative selector that contains a complex selector with the child combinator (>). It selects elements with an .icon class that are direct children of links that have a .fancy-link class and are in a :focus state:

a.fancy-link:focus > .icon {
  /* Styles */
}

This sort of thing can be used directly in the :has() argument list:

p:has(a.fancy-link:focus > .icon) {
  /* Styles */
}

But instead of selecting .icon elements that are direct children of .fancy-class links that are in :focus, we’re styling paragraphs that have focused .fancy-links with direct children that have an .icon class.

Phew, trying saying that three times fast! Maybe it helps to see a markup example that matches:

It generally doesn’t support pseudo-selectors

I say that :has() does not “generally” support other pseudo-elements in its arguments because that’s exactly what it says in the spec:

Note: Pseudo-elements are generally excluded from :has() because many of them exist conditionally, based on the styling of their ancestors, so allowing these to be queried by :has() would introduce cycles.

There are indeed a few “has-allowed pseudo-elements” that are allowed in the :has() list of arguments. The specification offers the following example showing how :not() is used alongside :has():

/* Matches any <section> element that contains 
   anything that’s not a heading element. */
section:has(:not(h1, h2, h3, h4, h5, h6))

Jhey Tompkins offers another example showing how :has()can be used to style forms based on various input states, such as :valid, :invalid, and :placeholder-shown:

label {
  color: var(--color);
}
input {
  border: 4px solid var(--color);
}

.form-group:has(:invalid) {
  --color: var(--invalid);
}

.form-group:has(:focus) {
  --color: var(--focus);
}

.form-group:has(:valid) {
  --color: var(--valid);
}

.form-group:has(:placeholder-shown) {
  --color: var(--blur);
}

It can’t nest itself, but it does support chaining

Sorry, there’s no nesting :has() within :has() a la:

/* Nesting is a no-go */
.header-group:has(.subtitle:has(h2)) {
  /* Invalid! */
}

That would create an infinite loop where the specificity is being evaluated inside another evaluation. It does, however, let you chain arguments:

h2,
.subtitle {
  margin-block-end: 1.5rem;
}

/* Reduce spacing on header because the subtitle will handle it */
.header-group:has(h2):has(.subtitle) h2 {
  margin-block-end: 0.2rem;
}

Chaining works like the AND logical operation in that both conditions have to match in order for the style rule to take effect. Suppose you have a list of .news-articles and the articles it contains are categorized. Maybe you want to apply certain styles to the list but only if it contains articles with .breaking-news and articles with .featured-news, but leave it unchanged if only one or none of the articles match those classes.

Well, you can chain two :has() declarations for that conditional styling:

.news-list:has(.featured-news):has(.breaking-news) { 
  /* Styles */ 
}

This example is specific only to the .news-list container. If we wanted to match any ol’ parent element that :has() both the .featured-news and .breaking-news classes on articles, we could leave out the .news-list altogether:

:has(.featured-news):has(.breaking-news) { 
  /* Styles */ 
}

It’s more than a “parent” selector

Jhey Thompkins calls it the “family” selector which might be a more fitting description, particularly when it comes to that last example we looked at. Let’s look at it again:

.header-group:has(h2):has(.subtitle) h2 {
  margin-block-end: 0.2rem;
}

We’re not just selecting an element with the .header-group class that contains an <h2> element. That’s the parent-selecting powers normally ascribed to :has(). What we’re selecting is an element:

• with a .subtitle class
• that is a child of the .header-group
• and contains an <h2> element inside of it.

Is <h2> the direct child of the .header-group? Nope, it’s more like a grandchild.

Combining :has() with other relational pseudo-selectors

You can combine :has() with other functional pseudo-class selectors such as :where(), :not(), and :is().

Combing :has() and :is()

For instance, you can check whether any of the HTML headings has at least one <a> element as a descendant:

:is(h1, h2, h3, h4, h5, h6):has(a) {
  color: blue;
}

/* is equivalent to: */
h1:has(a),
h2:has(a),
h3:has(a),
h4:has(a),
h5:has(a),
h6:has(a) {
  color: blue;
}

You can also pass :is() as an argument to :has(). Imagine if we changed that last example so that any heading level that contains an <a> child element or any child element with the .link class is selected:

:is(h1, h2, h3, h4, h5, h6):has(:is(a, .link)) {
  color: blue;
}

Combining :has() and :not()

We can use :has() with the :not() selector too! Let’s say you want to add a border to a .card element if it doesn’t contain any <img> element descendant. Sure thing:

.card:not(:has(img)) {
  border: 1px solid var(--my-amazing-color);
}

This checks if the card :has() any image then says:

Hey, if you don’t find any images, pretty please with a cherry on top apply these styles.

Wanna get crazier? Let’s select any .post element for images that are missing alt text:

.post:has(img:not([alt])) {
  /* Styles */
}

See what we did here? This time, :not() is in :has(). This is saying:

Hey, if you find any posts that contain an image without alternative text, apply these styles please and thank you.

This could be used to debug images that are missing the alt attribute:

Here’s another example I borrowed from Eric Meyer’s video. Let’s say, you want to select any <div> that has nothing but <img> elements.

div:not(:has(:not(img))) {
  /* Styles */
}

What we’re saying here is:

If you find a <div> and there’s nothing in there but one or more images, do your magic!

These are situations where order matters

Notice how changing the order of our selectors changes what they select. We talked about the unforgiving nature of the:has()argument list, but it’s even less forgiving in the examples we’ve looked at that combine :has() with other relational pseudo-selectors.

Let’s look at an example:

article:not(:has(img)) {
  /* Styles */
}

This matches any <article> elements that don’t contain any images. Now let’s flip things around so that :has() comes before :not():

article:has(:not(img)) {
  /* Styles */
}

Now we’re matching any <article> element that contains anything as long as there are no images in there. The article has to have a descendant to match, and that descendent can be anything but an image.

Use cases

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="/">Home</a></li>
  <li class="breadcrumb-item current">About</li>
</ol>

ol {
  display: flex;
  list-style: none;
}

ol {
  display: flex;
  gap: .5rem;
  list-style: none;
}

.breadcrumb-item::after {
  content: "/";
}

.breadcrumb-item:has(~ .current)::after {
  content: "/";
}

<form>  
  <label for="email-input">Add your pretty email:</label>
  <input id="email-input" type="email" required>
</form>

form:has(input:invalid) {
  border: 1px solid red;
}

<form>
  <input id="example-checkbox" type="checkbox">
  <label for="example-checkbox">We need to target this when input is checked</label>
</form>

/* When the input is checked, 
  style the label */
input:checked + label {
  color: green;
}

<form>  
  <label>
    <input type="checkbox">
    We need to target this when input is checked
  </label>
</form>

/* If a label has a checked input,
  style that label */
label:has(input:checked) {
  color: green;
}

<form> 
  <label for="example-checkbox">We need to target this when input is checked</label>
  <input id="example-checkbox" type="checkbox">
</form>

/* If a label has a checked input 
   that is it's next sibling, style 
   the label */
label:has(+ input:checked) {
  color: green;
}

Smart “Add to cart” button

What happens is we apply :has() to a page’s root element or body?

:root:has( /* Any condition */ ) {
  /* Styles */
}

The :root is the highest level of a document, which controls of everything under it, right? If something happens somewhere far below in the DOM tree, you can detect it and style another branch of the DOM accordingly.

Let’s say you run an e-commerce site and you want to style the “Add to cart” button when a product is added to the cart. This is pretty common, right? Sites like Amazon do this all the time to let the user know an item is successfully in their cart.

Imagine this is the structure of our HTML. The “Add to cart” button is contained in the <header> element and the product is contained in a <main> element.

A super simplified example of the markup might look like this:

<body>
  <header>
    <button class="cart-button">Add to cart</button>
  </header>
  <main> 
    <ul>
      <li class="p-item">Product</li>
      <li class="p-item is-selected">Product</li>
      <li class="p-item">Product</li>
    </ul>
  </main>
</body>

In CSS, we can check if the <body> :has() any descendant with both the .p-item and .is-selected classes. Once this condition is true, the .cart-button can be selected:

body:has(.p-item.is-selected) .cart-button {
  background-color: green;
}

<select>
  <option value="light">Light</option>
  <option value="dark">Dark</option>
  <option value="high-contrast">High-contrast</option>
</select>

body:has(option[value="dark"]:checked) {
  --primary-color: #e43;
  --surface-color: #1b1b1b;
  --text-color: #eee;
}

Style an element based on the number of children

Here’s a clever one that comes by way of Bramus Van Damme. :has() can apply styles based on the number of children in a parent container.

Imagine you have two-column layout. If the number items in the grid is os — 3, 5, 7, 9, etc. — then you’re stuck with an empty space in the grid after the last item.

It would be better if the first item in the grid could take up the two columns in the first row to prevent that from happening. And for that, you’d need to check whether the :last-child element in the grid is also an odd-numbered child:

/* If the last item in a grid is an odd-numbered child */
.grid-item:last-child:nth-child(odd) {
  /* Styles */
}

This can be passed into the :has() argument list so we can style the grid’s :first-child so it takes up the entire first row of the grid when the :last-child is an odd number:

.grid:has(> .grid-item:last-child:nth-child(odd)) .grid-item:first-child {
  grid-column: 1 / -1;
}

Browser support

Testing for support

The @supports at-rule supports :has() meaning we can check whether a browser supports it and apply styles conditionally based on the result:

@supports(figure(:has(figcaption))) {
  /* Supported! */
}

More information

• CSS Selectors Level 4 specification (W3C)
• The CSS :has Selector (and 4+ Examples) (Robin Rendle)
• :has(): the family selector (Jhey Tompkins)
• The CSS :has() selector is way more than a “Parent Selector” (Bramus Van Damme)
• :has() Has Landed in Safari (Michelle Barker)

Related tricks!

Article on Oct 27, 2022

Creating Animated, Clickable Cards With the :has() Relational Pseudo Class

Brecht De Ruyte

Article on Jan 17, 2023

Taming the Cascade With BEM and Modern CSS Selectors

Liam Johnston

Article on Dec 8, 2022

A Pure CSS Gallery Focus Effect with :not

Krzysztof Gonciarz

Related

Almanac on Dec 2, 2022

:is

:is(ul, ol) li { color: #f8a100; }

:is :where

Geoff Graham

Almanac on Aug 28, 2021

:not

:not(.element) { color: #f8a100; }

:not

Sara Cope

Almanac on Jul 14, 2021

:where

main :where(h1, h2, h3) { color: #f8a100; }

:where

Chris Coyier