1 Thing A Week 1 Thing
A Week

Some use cases for the :has() selector in CSS

Week 235.0 — 25th April '22

I'm most definitely a fan of the new :has() selector in CSS. It's only available in Safari for Mac and iOS at the moment, but it's going to be a game changer.

I wanted to highlight some of the use cases I've come across in the past few weeks on Twitter, both as a record for the future and as a reference for myself when I might find myself stuck looking for a pure CSS solution.

Conditional styling

Style forms and form sections depending on the state of their children

Dynamic themes

Toggle option visibility

Detect if there are errors on the page

With all of this at our disposal, when you think about how the web used to be built we no longer need to make a request to a server to figure out what the correct markup should be and maybe hydrate the page with JavaScript once things change. With the way the web works now, the whole presentation layer can live in CSS. That's exactly where it's meant to be.

More from 1 Thing A Week
« Android style-form labels with pure CSS Understanding N-match notation in CSS Is selvedge denim worth it? »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 235.3 – Wednesday
    1. Deaths involving COVID-19 by vaccination status ons.gov.uk
  2. 235.5 – Friday
    1. Baker Boy covers Blur's "Song 2" triple j on youtube.com

Jump to notable items for Week #234, Week #236 , 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