【CSS】:has()の使い道

cssの疑似クラス:has()の使い道についてまとめてみました。

基本的な使い方

:has()は子要素にあるクラスがあるときだけ、スタイルを付与できるようになっています。
:has()を使うことによって今までjavascriptでしかできなかったことがcssのみで出来るようになります。

上の例では
.cardの中に.orangeクラスが入っていた場合のみ、
.card:has(.orange)で背景をオレンジ色にしています。

参考：https://coliss.com/articles/build-websites/operation/css/howtouse-css-has-pseudo-selector.html

使用例

:has()によってさまざまな機能が実装できます。

こちらは同意ボタンにチェックを入れたときだけ送信できるようにする機能です。

https://ccg-wheads.jp/journal/article-558/

これが一番多くつかいそうです。
カードの中に画像がある場合、
.card:has(img) {
display: flex;
}
で横並びにすることができます。

これはトグルボタンをクリックすると文字のON/OFFが切り替わる仕組みです。
ON/OFFは疑似要素で記述されています。

https://webdesignshake.com/4878/

これはちょっとマニアックなケースと思いますが
リストが入れ子になっていないときだけ、背景をピンク色にするようにしています。

https://dskd.jp/archives/122.html

個人的にはホバーやチェックしたときに外側の要素が変わるような機能と、
カードの中にある要素があるか無いかでスタイルを変更するときに使えると思います。