Have you ever thought about a CSS selector where you check if a specific element exists within a parent? For example, if a card component has a thumbnail, we need to add display: flex to it. This hasn’t been possible in CSS but now we will have a new selector, the CSS :has which will help us to select the parent of a specific element and many other things.
In this article, I will explain the problem that :has solves, how it works, where and how we can use it with some use-cases and examples, and most importantly how we can use it today.
Table of contents
The problem
Introducing CSS :has selector
The :has selector is not only about the parent
Browser support
Can we use it as an enhancement?
Use cases for CSS :has
Section header
Card component, example 1
Card component, example 2
Card component, example 3
Filtering component
Show or hide form elements conditionally
Navigation item with a submenu
Header wrapper
Emphasize alerts
Switching color schemes
Styling generated HTML
Button with an icon
Multiple buttons
Information modules
Change grid based on the number of items
Figure and figcaption
The problem
Being able to style a specific parent or element based on the existence of an element isn’t possible. We have to make CSS classes and toggle them based on the variation we need.
Consider the following basic example.
We have a card component in two variations: 1) With an image 2) Without an image. In CSS, we might do something like this:
/* A card with an image */.carddisplay:flex;align-items:center;gap:1rem;>/* A card without an image */.card--plaindisplay:block;border-top:3pxsolid#7c93e9;>
As you saw above, we created a variation class specifically for having a card without an image since we don’t need the flex wrapper. The question is, what if we can conditionally do that in CSS, without a variation class?
Well, this is where CSS :has come to the rescue. It can help us in checking if the .card element has a .card__image or not.
For example, we can check if the card :has an image and if yes, we need to apply flexbox.
According to the CSS spec, the :has selector checks if a parent contains at least one element, or one condition like if an input is focused.
Let’s revisit the previous example snippet.
We check if the .card parent contains the .card__image child element. Consider the following figure:
In plain words, the CSS above is equivalent to the following
Does the card has a card__image element?
Isn’t that just amazing? We’re getting some kind of logic in CSS. What a time to write CSS!
The :has selector is not only about the parent
It’s not only about checking if a parent contains a child, but we can also check if an element is followed by a
, for example. Consider the following:
This checks if the element is followed directly by a
element.
Or we can use it with a form element to check if there is a focused input, for example.
/* If the form has a focused input, apply the following */form:has(input:focused)background-color:lightgrey;>
Browser support
At the time of writing, CSS :has works in Safari 15.4 and in Chrome Canary. Keep an eye on Can I use for the support.
Can we use it as an enhancement?
Yes, it’s possible. We can check with CSS @supports rule like the following.
@supportsselector(:has(*))/* do something */>
Enough theory, let’s get into the use-cases!
Use cases for CSS :has
Section header
When I work on a section header, I will mostly have two variations, one with the title only, and one that contains both title and an anchor link.
Based on whether there is a link or not, I want to style it differently.
class="section-header">Latest articleshref="/articles/">See all
Notice that I used :has(> a) which will only select the direct child link.
.section-headerdisplay:flex;justify-content:space-between;>/* If there is a link, add the following */.section-header:has(>a)align-items:center;border-bottom:1pxsolid;padding-bottom:0.5rem;>
Card component, example 1
Let’s go back a bit for the initial card example. We have two variations, one with an image and the other without one.
In this card example, we have two variations of card actions: one with a single item (the link) and the other with multiple actions (save, share, and more).
When the card actions have two different wrappers for the actions, we want to activate display: flex like the following (Please don’t mind the below markup, it’s purely for demonstration purposes!).
Have you ever needed to reset the border-radius for a card component based on if there is an image or not? This is a perfect usage for CSS :has .
Consider the following figure. When the card image is removed, the border radius of the top left and right corners is zero, which looks odd.
/* If no image, add radius to the top left and right corners. */.card:not(:has(img)).card__contentborder-top-left-radius:12px;border-top-right-radius:12px;>.cardimgborder-top-left-radius:12px;border-top-right-radius:12px;>.card__contentborder-bottom-left-radius:12px;border-bottom-right-radius:12px;>
In this example, we have a component with multiple options. When none of them is checked, there is no reset button. However, when at least one is checked, we need to show the reset button.
Oh, and we can’t do that in CSS at all. This is one of the things that we will ditch Javascript for when :has has support in stable browsers (No, :has has isn’t a typo).
Show or hide form elements conditionally
We might need to show a specific form field based on a previous answer or selection. In this example, we need to show the “other” field in case the user selected “other” from the select menu.
With CSS :has , we can check if the select menu has the other option selected and show the “other” field based on that.
The CSS :has selector helps you select elements that contain elements that match the selector you pass into the :has() function. It’s essentially a “parent” selector, although far more useful than just that. For example, imagine being able to select all
s but only when they contain a
. That’s what we can do:
Although it’s not supported in any browser as I write, it has now dropped in Safari Technical Preview 137, so it’s starting to happen! Pretty darn handy right! Here’s another example. Say you want space after your headers. Of course! A bit of margin-block-end on your h2 should do it. But… what if there is a subtitle? Now we can select a parent on the condition a subtitle is present and adjust the spacing.
h2, .subtitle < margin: 0 0 1.5rem 0; >.header-group:has(h2):has(.subtitle) h2 < margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ >/*
Blog Post Title
Blog Post Title
This is a subtitle
*/
The way I think about :has is this: it’s a parent selector pseudo-class. That is CSS-speak for “it lets you change the parent element if it has a child or another element that follows it.” This might feel weird! It might break your mental model of how CSS works. This is how I’m used to thinking about CSS:
You can only style down, from parent to child, but never back up the tree. :has completely changes this because up until now there have been no parent selectors in CSS and there are some good reasons why. Because of the way in which browsers parse HTML and CSS, selecting the parent if certain conditions are met could lead to all sorts of performance concerns. If I sit down and think about all the ways I might use :has today, I sort of get a headache. It would open up this pandora’s box of opportunities that have never been possible with CSS alone. Another example: let’s say we want to only apply styles to links that have images in them:
This would be helpful from time to time. I can also see :has being used for conditionally adding margin and padding to elements depending on their content. That would be neat. The :has selector is part of the CSS Selectors Level 4 specification which is the same spec that has the extremely useful :not pseudo-class. You could argue that the CSS :has selector is more powerful than just a “parent” selector, which is exactly what Bramus has done! Like in the subheadings example above, you aren’t necessarily ultimately selecting the parent, you might select the parent in a has-condition, but then ultimately select a child element from there.
/* Matches elements that have a as a child element */ figure:has(figcaption) < … >/* Matches elements that is a child of a that contains a child element */ figure:has(figcaption) img
There you can quickly see that the second selector is selecting a child , not just the parent of the .
And the list is forgiving: The list is no longer “forgiving” after the W3C adopted a resolution in December 2020 in response to a reported issue. So, if the selector list contains even one invalid argument, the entire list is ignored:
/* 👎 */ article:has(h2, ul, ::-blahdeath) < /* ::blahdeath is invalid, making the entire selector invalid. */ >
/* 👍 */ article:has(:where(h2, ul, ::-blahdeath)) < /* :where is a forgiving selector, making this valid. */ >
The :not() selector is part of the same spec…
Unlike :has , :not does have pretty decent browser support and I used it for the first time the other day:
That’s great I also love how gosh darn readable it is; you don’t ever have to have seen this line of code to understand what it does. Another way you can use :not is for margins:
So every element that is not the last item gets a margin. This is useful if you have a bunch of elements in a card, like this:
CSS Selectors Level 4 is also the same spec that has the :is selector that can be used like this today in a lot of browsers:
:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) < color: #BADA55; >/* . which would be the equivalent of: */ section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6, aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, nav h1, nav h2, nav h3, nav h4, nav h5, nav h6
