Simple Filter with HTML and CSS

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

<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

section.filtered-list:has(option:checked) div{display:none;}
section.filtered-list:has(option[value~="all"]:checked) div{display:block;}
section.filtered-list:has(option[value~="art"]:checked) div[class~="tag-art"]{display:block;}
section.filtered-list:has(option[value~="webdev"]:checked) div[class~="tag-webdev"]{display:block;}
section.filtered-list:has(option[value~="misc"]:checked) div[class~="tag-misc"]{display:block;}