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

Published on July 21, 2021 (↻ December 12, 2021), filed under Development (RSS feed for all categories).

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 (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m a contributor to several web standards, and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (Please be critical, interpret charitably, and give feedback.)