CSS: “:has()” and the Lost Paradigm

Post from July 21, 2021 (↻ December 12, 2021), filed under Web Development (feed).

In Selectors Level 4, CSS specifies :has(), a relational pseudo-class that allows to select the parents of elements.

There’s a lot of history, some of which Chris Coyier shares in Parent Selectors in CSS, with ideas for it dating back to at least 2002. (You find me in there, too, publicly expressing desires in 2006.) The idea for :has() is old.

There’s also a lot of enthusiasm, some of it palpable in Adam Argyle’s May tweet on the matter, and the responses to it. There are great use cases for :has(), and this here is just one random example:

section:has(form) {
  /* Different styles for a section with a form */
}

There are different reasons why you can find :has() exciting. Here’s what I like about it.

The Lost Paradigm

I love :has() and I’ve been waiting for :has() because it fully opens the door to an ancient frontend development paradigm that we, as a field, have long lost sight of:

The paradigm of ID- and class-less development.

This paradigm, a useful exercise for frontend developers but otherwise only practiced in research contexts, means not to use any IDs and classes, at all.

This is different from the idea not to use any IDs, but only classes, as that approach is cognitively lazy (on purpose; no judgment) and therefore lacks theoretical ambition.

It instead challenges the developer: Use only the absolutely, critically required markup (minimal web development), and move all complexity into the style sheets.

(Yes—this means a tax on understandability and maintainability, and is therefore not suitable for all projects. You cannot and should not use this for every project.)

Personally, I’ve always enjoyed and played with this challenge. In earlier years of my career, I was even convinced this is where we would and should go (together with XHTML 2.0, which included a few ideas I cherished, too).

While we won’t go down this route anymore, I still entertain the paradigm—and look forward to seeing :has() in action, when it’s supported enough. With all the other selectors, we do have everything to build even complex sites and apps, without IDs and classes. That still has uses.

(Again, it’s all fine: You don’t need to explore this paradigm if you don’t appreciate and can’t sustain it.)

About Me

I’m Jens, and I’m an engineering lead and author. I’ve worked as a technical lead for Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly. I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.

If you have a question or suggestion about what I write, please leave a comment (if available) or a message. Thank you!