Introduction
Modern browsers have started to support the :has
pseudo-class. Safari supports it since March 2022 and Chrome just released a new version in August 2022 that supports it. In Firefox it can used enabling the layout.css.has-selector.enabled
flag.
The :has()
pseudo-class selector can be used as a parent selector. It is very powerful because it accepts a relative selector list as an argument, therefore, possibilities are endless.
Example
Let's see some examples of how the :has
pseudo-class can be used. We have the following html structure:
<div>
<div>
<img src="ocean.jpeg" />
<p>Image description.</p>
</div>
<div>
<img src="html.jpg" />
</div>
</div>
We have two images, one with a description and one without.
First, we are going to select the div
element that contains the image with a description. For this we can use the child selector >
like this: div:has(> p)
. For our example it is enough, but we could do something more specific like combining the child selector and the adjacent sibling selector +
like this: div:has(> img + p)
.
-
div:has(> p)
is going to select the div elements that contain a paragraph. -
div:has(> img + p)
is going to select the div elements that contain an image and a paragraph.
We can use both for our example.
div:has(> p) {
border: 2px solid #000;
border-radius: 5%;
display: flex;
flex-direction: column;
align-items: center;
}
Now we are going to remove the margin of the image that has a description and we are going to give it some border radius.
img:has(+ p) {
margin: 0;
border-radius: 5%;
}
Finally, we are going to give the image without a description some border radius. For this we are going to use the :not()
pseudo-class.
-
img:not(:has(+ p))
is going to select the img elements that do not have a p element as an adjacent sibling.
img:not(:has(+ p)) {
border-radius: 50%;
}
This is the final result:
You can also see the HTML rendered at the bottom of this page. Remember that only if you are using any of the browsers that already supports the :has
pseudo-class you will see the result.
Top comments (3)
Finally cross-browser support for
:has()
More details and discussion history:
CSS :has(.parent-selectors) 👪
Ingo Steinke ・ Dec 21 '21 ・ 5 min read
Finally! 😂
Now we just need to wait like 5 years more to Firefox and Opera to apply the proposal 🙈
haha let’s hope they do it sooner 🤞