【HTML＋CSS】疑似クラス :has() がめちゃくちゃ便利！２（table絞り込み機能）

ちょっとご無沙汰しておりました。
久しぶりの投稿です。

前回の【HTML＋CSS】疑似クラス :has() がめちゃくちゃ便利！の続きですが、また疑似クラス:has() を使用して面白いものを作ってみました。

とりあえず、サンプルHTMLをご覧ください。
【疑似クラス :has() 使用のtable絞り込み機能】
https://revenue-test.biz/test_html/has-test-tableselect.html

設置の解説は、サンプルHTMLに書いてある通りです。
<label>をボタンに見立てるのはいつものことなんですが、
ボタン（全件表示・絞込表示）を<input type=radio> で制御して、
（列・行）先頭のセルに設置した<input type=checkbox> で絞り込みたい行や列を選択、
あとは :has() で条件を制御して、テーブルの絞り込み機能をCSSのみで実現しているものになります。

※サンプルHTML内の CSS や HTML のソースは、ご自由にお使いください。
お好きに改造して使ってくださっても問題ないです。

疑似クラス:has() が登場するまでは、CSSでは子要素の状態から親要素にスタイルを割り当てることができなかったんですが、これの登場で本当にCSSの常識が覆されましたよね。
なので、以前は javascript でしか実装しえなかったこんな機能も、CSSで作れることができるようになりました。

以前からすると、本当にものすごいCSSの革命なんですが、意外と普及していないというか…ちょっともったいないなあ、と思います。
まだまだ :has() で置き換えられるところが javascript や jQuery で作られていることが多いので。
（まあ、わざわざ工数を使って置き換えるのがめんどくさい～・・・とかの理由もあるんでしょうけれど。）

もうほとんどのブラウザで実装されているものなので、ガンガン使っていきたいものです。