Getting ready for the :has() selector

December 8, 2023

I have been excited about the :has() selector for over two years. Support of the :has() selector landed in Chrome in August 2002 along with container queries. But there has not been support in all of the evergreen browsers. But that will change this month when it finally lands in Firefox 121, which will be released on December 19.

I have used :has() in a few client projects already but more as a progressive enhancement. There have been many more times I would have chosen to use it if the support had been there across the board. I would have had to come up with another solution for Firefox users otherwise or it might not have been possible at all.

Many have dubbed this selector as the “parent” selector. It has long been a desire for developers to be able to apply CSS to an element based on what is going on inside that element (children). The :has() selector now gives us that long-awaited ability.

But the selector can do so much more than give us a way to style the parent element. I think the biggest challenge for developers will be opening their minds to the possibilities. We have been used to the constraints of not having this type of selector that it will take us a while to unlearn old habits and see all kinds of new possibilities and solutions that :has() will open up for us.

The purpose of this post is not to teach you how to use it. But I want to connect you to some of the articles I have read over the past two years that have opened my mind to see new possibilities. I wrote a similar post for container queries and now I want to address the :has() selector. I hope you find these helpful and they serve as a springboard to coming up with new solutions for different use cases.

I never thought this would be possible with CSS (September 2022) – a video by Kevin Powell where he explores some of the possibilities that :has() will unlock.

I am sure there are many more great articles out there about solutions with the :has() selector. These are the ones that I have come across and have been helpful to me.

Finally, I wrote about a solution I used the :has() selector for a project over a year ago. I used it to highlight a link in a card where the user could play a video either by clicking on a thumbnail or the link. I used the :has selector to style the link when the thumbnail was hovered.

This post is part of my attempt to post something every day for a month. I was inspired by Michelle Barker, who recently participated in National Blog Posting Month.

Comment on this post