1 Thing A Week 1 Thing
A Week

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

Week 253.0 — 29th August '22

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:

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:

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.

More from 1 Thing A Week
« My iPhone 14 Pro wishlist How to implement the Web Share API on your website There's always room for improvement Food Wars »

Advertisement

Notable

Nothing notable this week 😞

Jump to notable items for Week #252, Week #254 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit