DEV Community

José Miguel Álvarez Vañó
José Miguel Álvarez Vañó

Posted on • Originally published at jmalvarez.dev

Using the new :has pseudo-class as a CSS parent selector

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

This is the final result:

Rendered HTML 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.

Resources

Top comments (3)

Collapse
 
ingosteinke profile image
Ingo Steinke
Collapse
 
joelbonetr profile image
JoelBonetR 🥇

Finally! 😂
Now we just need to wait like 5 years more to Firefox and Opera to apply the proposal 🙈

Collapse
 
jmalvarez profile image
José Miguel Álvarez Vañó

haha let’s hope they do it sooner 🤞