Jens Oliver Meiert

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

Post from July 21, 2021 (↻ July 31, 2021), filed under .

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 is 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.)

Tweet this? (If it changed your life, you delight me with a coffee.)

About Me

Jens Oliver Meiert, on April 29, 2020.

I’m Jens Oliver Meiert, and I’m an engineering manager and author. 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 questions or suggestions about what I write, please leave a comment (if available) or a message.

Read More

Have a look at the most popular posts, possibly including:

Cover: The Web Development Glossary.

Perhaps my most comprehensive book: The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Google Play Books, and Leanpub.

Stay up-to-date? Follow me by feed or on Twitter.

Looking for a way to comment? Comments have been disabled, unfortunately.

Found a mistake? Email me, jens@meiert.com.

You are here: HomeArchive2021 → CSS: “:has()” and the Lost Paradigm

Last update: July 31, 2021

Professional frontend developers produce valid HTML and CSS.