CSS :has a parent selector now

CSS now includes a :has selector that allows us to apply styles on the basis of what is happening inside an element. Often referred to as a parent seletor, the :has() function allows us to achieve this and more.

Let us take a look at this relative selector.

- Advertisement -
div:has(img) {
  background: black;
}

It only applies the background if there is an image inside the div, otherwise it will not. So

<div>
     <img></img>
</div>

will get selected but if it is a simple div, or has anything else inside it, the styles will not be applied to them.

Chaining

We can even chain the selector and have nested conditions:

div:has(h2):has(ul) {
  background: black;
}

Not just a parent selector

I came across this article which takes the selector a bit further and does not limit the :has selector to just being a parent selector. You can select the children as well by combining it with the parent selector.

/*  Matches <figure> elements that have a <figcaption> as a child element */
figure:has(figcaption) { … }

/* Matches <img> elements that is a child of a <figure> that contains a <figcaption> child element */
figure:has(figcaption) img { … }

The second selector gives us the ability to select the child image and we can get a lot more creative and it opens a world of opportunities.

Browser support

While CSS :has is a part of the official spec, it is not fully supported across all browsers yet. But it should hopefully be implemented by Firefox soon and we will get to use it in our future projects.

Recent Articles

How to sort a Set in JavaScript

ES6 introduced the set data structure in JavaScript. But sets are not ordered abstract data structures. So there is no .sort() property...

Debugging CSS scroll using one simple style

I have been doing a lot of complicated front-end work off lately and that always brings me back to the class conundrum...

CSS :has a parent selector now

CSS now includes a :has selector that allows us to apply styles on the basis of what is happening inside an element....

How to fix “invalid active developer path” after MacOS update

If you are here, then you are getting an "invalid active developer path" error on running commands in the terminal after a...

Getting the value of an input element as a number without parseInt

Every once in a while, you come across something and you think, how did I not know this earlier? valueAsNumber is that thing...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.