Pure CSS List Filter

I wanted to make a simple filter for my lists and galleries as the lists becoming too big. I was looking for a simple HTML and CSS solution.

I learned this from Solaria's tutorial. It's a neat practical application for CSS attribute selectors. And the code is compact and quite easy to manage for a small personal website.

HTML

There's a select drop down select menu and list of whatever you want to be selected. I use different classes for each group of items.

<section class="filtered-list">
  <select>
    <option value="all">All</option>
    <option value="art">Art</option>
    <option value="misc">Misc</option>
    <option value="webdev">Webdev</option>
  </select>
  <div class="tag-art">
    <a href="">Article about art</a>
  </div>
  <div class="tag-webdev">
    <a href="">Article about webdev</a>
  </div>
  <div class="tag-misc">
    <a href="">Article about something else</a>
  </div>
</section>

CSS

This code checks what is currently selected and hides everything else.

section:has(option:checked) ul li
{display:none;}
section:has(option[value~="all"]:checked) ul li,
section:has(option[value~="fruits"]:checked) ul li[class~="tag-fruits"],
section:has(option[value~="veggies"]:checked) ul li[class~="tag-veggies"]
{display:table-row;}