CSSの疑似クラスである:has()がようやく全ブラウザに対応してくれました！

「:has()ってなんだ？」という方もいらっしゃるかもしれません。

例えば通常は水色のボックスである『#abc』の中に『.xyz』が現れると『#abc』の背景をピンクにする、ということができます。

これまでは親要素に対して子要素が影響を与えることはJavaScriptなどに頼る必要があり、cssのみでは困難でした。
けれど:has()すべてを解決してくれます。

活用方法-チェックボックスの装飾

個人的にここ最近使用した中では、チェックボックスなどの装飾がとても便利に感じました。
これまでだと囲む要素が多かったのですが、短いコードで済むようになります。

See the Pen
hasプロパティ by kkdd (@kk8kk)
on CodePen.

このようにボタン状にした時、例えばcheckboxにチェック（checked）が入ったら値を取るのに色々と囲みなどを使って装飾をする必要がありました。
:has()を使用すればチェックが入ったら親のlabelの色を変える、というすごくわかりやすい書き方ができます！


—
:has()を使用すれば、記述がだいぶ楽になります。
これを機に、これまで使用してきた記述を見直してみるとコードを短縮できるかもしれません。