We can :has it all

I’m still obsessed with how awesome and powerful :has() is in CSS. Ryan Mulligan really drives it home in We can :has it all with a single Pen that offers simple, realistic UI controls for:

1. Changing color theme
2. Offering alternate layouts
3. Filtering by category

These are things you can easily imagine on any website, and now handled here entirely without JavaScript at all.

Declarations like this bring me joy:

body:has([name="filter"][value="bakery"]:checked)
  .card:not([data-category="bakery"]) {
  display: none;
}Code language: CSS (css)