【HTML＋CSS】疑似クラス :has() がめちゃくちゃ便利！

先日、2023年12月にFirefoxがとうとう疑似クラス:has() に対応したとのことで、ほとんどの主要ブラウザで対応された記念にこの素晴らしい機能について解説したいと思います！

そもそも、この疑似クラス:has() とはなんぞや？とお思いの方もいらっしゃるかと思います。
これは、「こんな子孫要素を持っている親要素にCSSを適用する」という、今までになかった疑似クラスなんです。
さらには、「こんな子孫要素を持っている親要素の子要素にCSSを適用する」という離れ業も可能です。
これまで、CSSでは子孫要素での条件で、親or祖先要素にCSSを適用させることが出来なかったわけですが、その常識がこの疑似クラス:has() の登場にてひっくり返ったというわけです。

論より証拠。
まずは、サンプルHTMLを載せたいと思います。

１．開閉BOX

サンプル：https://revenue-test.biz/test_html/has-test-openclose.html
まずは、これを見ていただければ内容を理解できると思います。
これまでもこのようなCSSで閉じ開きできるBOXはありました。
ですが、それは

<label for="ID">●●●</label><input type="checkbox" id="ID">
～～～後続のHTML～～～

こんな感じで、ID指定しなくてはなりませんでした。
そして、

input:checked + 後続要素 { スタイルシート }

というような感じで、CSSを書いて、inputのあとに要素が来なければなりませんでした。
ですが、今回の疑似クラス:has() を用いれば、

▼HTML
<div class="openclose-box">
    <label><input type="checkbox">openclose-boxタイトル</label>
    <div>
        ～～～～～～
    </div>
</div>

▼CSS
.openclose-box:has(input:checked) > div { スタイルシート }

というように、ID指定すらいらないので、この開閉BOXを自由にいくらでも設置しやすくなりました。
本当にめちゃくちゃ便利になりましたよね。

これの応用で、他にもサンプルを作成いたしました。

２．おりたたみtable

サンプル：https://revenue-test.biz/test_html/has-test-tableclose.html
一応、設置方法も書いております。
初期状態で、テーブルの行の表示を限定しておいて、ボタン（<label>）をクリックするとすべての行が開く、というものです。
デフォルトで開く値（data-show）は、10までを想定してのCSSになります。
（テーブルを初期状態で閉じていたいのに、最初から10行を超えて開きたい、ということはあまりないでしょうから…）

３．タブ切り替えBOX

サンプル：https://revenue-test.biz/test_html/has-test-tabbox.html
サンプルを見ていただけるとわかると思います。
タブでBOXを切り替えるCSSです。
（タブの数は最大10個を想定してのCSSです。）
※これに関しては ID指定はないですが、type="radio" なのでname属性の指定は必要です。
　1ページに複数のタブ切り替えBOXを設置したい場合は、このname属性をそれぞれ別に指定する必要がありますので、ご注意ください。

というわけで、この３つのサンプルだけでも疑似クラス:has() がどれほど便利なものなのか、その片鱗がうかがえたと思います。

jQuery でいえば、
要素.parents(".祖先クラス名").find(".子孫クラス名").css(～～～～)
みたいなことが、CSSでもできるようになったわけですから。
今までjavascript や jQuery でしかできなかったことが、CSSである程度可能になったんですよね。
class名の追加や削除はCSSではできないので、CSSの切り替えを
<input type="checkbox"> or <input type="radio">
で代用しているわけです。<label> をボタンっぽく使って。

・・・個人的には、メディアクエリでスクロール量とかでの判別ができるようにならないかなあ、と願っております。
これが出来たら、パララックスもCSSのみでほとんど可能になるでしょうし。
・・・パララックスサイト自体は、個人的に好きではありませんけれどね(笑)