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.
- Using :has() as a CSS Parent Selector and much more (August 2022) – a post from Jen Simmons, who is a great teacher.
- CSS :has() (12 Days of Web – December 2022) – Estelle Weyl explores solutions using
:has()selector. - Practical uses of the :has() relational pseudo class (October 2022) – I got a lot out of this article when I read it over a year ago.
- Exploring :has() Again (Michelle Barker – April 2023)
- Leveling Up Your CSS Skills with The :has() Selector (January 2023) – Stephanie Eckels is another great teacher. She wrote this article for Smashing Magazine.
- CSS :has Parent Selector (Ahmad Shadeed – April 2022) – Ahmad always has a lot of great examples and explanations in his posts. This article contains a wide range of use cases highlighting this new tool’s power.
- The CSS :has() selector is way more than a “Parent Selector” (December 2021)
- Style a parent element based on its number of children using CSS :has() (November 2022)
- Selecting previous siblings with CSS :has() (September 2023)
- Parents counting children in CSS (August 2022)
- Day 6: the :has() pseudo-class (October 2022)
- Day 8: nesting :has() (October 2022) – You cannot nest
:has().
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.