I'm getting really excited for the :has() selector in CSS

I've covered the :has() selector in CSS a few times now, but I'm finding it hard not to get excited about it now.

It's not only going to be possible to define the parent selector I always wanted to have in CSS, it's also possible for it to become a previous-sibling selector to. More and more, CSS is taking presentation away from JavaScript and I am here for it!

There's been a real surge of interesting articles and demos that I've seen on Twitter and I thought I'd share a couple of the tweets I've seen over the past couple of weeks so that you can get excited too.

Let's start with a tweet from @jensimmons that links through to a comprehensive article on the :has() selector:

After working for months on an epic article about the new `:has()` pseudo-class and how it can be combined with other CSS selectors to a powerful effect — we published it yesterday! There are so many great use cases that now no longer require JavaScript.

View on twitter

Jen followed up with 5 days of tweets giving a bit more context and tweet-sized examples.

1. Day 1
2. Day 2
3. Day 3
4. Day 4
5. Day 5

Second tweet is from @jh3yy with this demo that takes advantage of the :is() and :has() selectors:

CSS Tip! 🚀 You can select the previous siblings of an element with :has() to create cool hover effects like this OS dock🔥 No JS 😎

View on twitter

Honestly, just knowing we are so close to this all being a reality feels unreal to me. I've spent almost 2 decades writing loops in PHP and JavaScript to provide classes and IDs so that I can build layouts but there are so many more options to do this in CSS now meaning that the presentation really can be abstracted from the HTML.

While I'd have truly loved to have had a parent selector of some sort, especially as jQuery came along and spoiled us with the .parent() method, this really is a great case of better late than never.