Me
sebdd

thoughts and inspiration on designing, programming, and writing for the web

  • Blog
  • About
  • Speaking
  • Uses
  • Reads
  • Blogroll
  • Now
  • Newsletter
  • Twitter
  • Mastodon
  • Pinboard
  • Literal
  • Telegram
  • RSS
  • #css
  • #html
  • #javascript
  • #laravel
  • #livewire
  • #misc
  • #mysql
  • #programming
  • #tech
  • #writing

↗ CSS :has looks pretty cool

15 Jan 2024 via frontendmasters.com

  • #css

I haven't really played around with the new :has selector in CSS yet, but this example from Chris Coyier piqued my interest.

With this query, you can dynamically filter a list with pure CSS!

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

blogging since 2015!
syntax highlighting with Torchlight