GoogleChromeブラウザのver105から搭載された、CSSの
:has()という機能が面理過ぎます。
でも、この機能Firefoxだと現時点（2023-06-03時点 : Firefox ver.115）ではまだ搭載されていないので、他のブラウザで動いても、Firefoxでは動作しません。
と言っても、現時点でFirefoxではベータテストを行っていてデバッグモードで実装することは可能なのだそうですが、これは開発内部での話であって、
一般的なデフォルトモードでのブラウザで対応出来ていない時点で、未搭載と考えなければいけません。
※ブログを書いた時点でのブラウザ別対応表
:has()ってどんな機能？
:has()
該当する要素が一つ以上の要素に一致することを表します。
参考: https://developer.mozilla.org/ja/docs/Web/CSS/:has
次のようなHTMLをサンプルに使って:has()を使ってみます。
<div><h1>sample</h1></div>
<div><h2>sample</h2></div>
div:has(h2){
color:red;
}
このように書くだけで、h2を子階層に持っているdivタグがselectorで抽出されることになります。
子階層の状況を監視して、その元の親階層のスタイルがセットできるため、これまでcssで出来なかった親階層操作ができるようになったのが革新的です。
:has()使い方サンプル
:hasというCSSの擬似クラスがどれだけ便利に使えるのか、これまで使ってきたものを紹介してみます。
子階層のhoverで:has
内包する特定の要素(サンプルはaタグ)にマウスカーソルが重なった時に、親要素の枠線を赤色に変更しています。
<div><a href='https://example.com/A'>A</a></div>
<div><a href='https://example.com/B'>B</a></div>
div:has(a:hover){
border:1px solid red;
}
checkboxで:has
これまで、checkboxは、兄弟構造で使わないといけなかったんですが、子階層にあるcheckboxを参照することができるようになりました。
checkboxと連動すると、動的な効果が簡単に作れます。
<label>
<div></div>
<input type='checkbox' style='display:none;'>
</label>
label div::before{
content:'クリックしてください';
}
label:has(input[type='checkbox']:checked) div::before{
content:'チェックしました';
}
radioボタンで:has
ラジオボタンを使うと、メニューなどでの動的効果が簡単に作れます。
<div>
<label><span>A</span><input type='radio' name='menu'></label>
<label><span>B</span><input type='radio' name='menu'></label>
<label><span>C</span><input type='radio' name='menu'></label>
</div></div>
div{
display:flex;
gap:10px;
}
input[type='radio']{
display:none;
}
div label{
cursor:pointer;
}
label span{
padding:5px 20px;
display:block;
background-color:white;
border:1px solid black;
color:black;
}
label:has(input[type='radio']:checked) span{
background-color:black;
color:white;
}
あとがき
Firefoxに搭載されれば、もはや何の抵抗もなくwebページなどにドンドン:has()を実装できるのですが、それを待つのか、
Firefoxでhas機能をハックして実装できるライブラリを自作するのか、現時点で迷っている状態です。
Firefoxのデスクトップブラウザの利用率は、7.69%なんだそうです。(2023年時点）
参考 :
https://kinsta.com/jp/browser-market-share/
今現在、なんとももどかしい状況なのですが、思い立ってライブラリを作ったら、ブログで公開したいと思います。
