Search

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)

Wanna learn CSS from a course?

Frontend Masters logo

FYI, we have a full CSS learning path with multiple courses depending on how you want to approach it.

Leave a Reply

Your email address will not be published. Required fields are marked *

Frontend Masters ❤️ Open Source

Did you know? Frontend Masters Donates to open source projects. $313,806 contributed to date.