CSS の「:has()」が便利すぎる話

こんにちは。かずです。
いきなりですが、CSSの「:has()」使ってますか？
僕はもちろん多用しています。それはもう大量に。

少し前までは、JavaScriptでしかできなかったことが、最近は「:has()」だけで解決できる場面がかなり増えてきました。

今回は、実務で「これJSいらなかったじゃん…」となった「:has()」の便利な使い方を簡単にご紹介。

そもそも「:has()」とは

ざっくり言うと、「指定の子要素を持っている親を選択できるCSS」です。

例として以下のような形があったとします。

<div class="card">
	<img src="">
</div>

この時、

.card:has(img){
	/* ここにスタイル */
}

「img を持っている .card」を指定できます。これがかなり強いです。

今まで地味に面倒だった

例えばよくあるのが、「画像がある時だけデザインを変えたい」みたいなケース。
今まではJavaScriptでclassを付けたり、無理やりCSSだけでやったりして、保守性が落ちることも多かったです。

でも「:has()」を使えばCSSで簡単に指定出来るんです。

.card:has(img){
	grid-column:span 2;
}

これだけです。便利すぎですね。

フォーム周りにも便利

<label>
	<input type="checkbox" checked>
	テキスト
</label>

inputにチェックが付いた状態のHTMLですね。これをCSSだけで

label:has(input:checked){
	color:red;
}

こんな感じのこともできます。
inputの状態によって親のスタイルを変えるがCSSだけでできるようになりました。

注意点も

便利ですが、使いすぎるとセレクタが重くなることがあります。

body:has(.modal.active)

こんな感じに、広範囲を監視するような書き方は注意。
また、古いブラウザ対応が必要な案件では確認も必要です。
基本的には問題ありませんが、案件によってはまだチェックしたほうが安全です。

「CSSでここまでできる」が増えた

最近のCSSはかなり進化していて、

・:has()
・clamp()
・aspect-ratio
などなど・・・

以前はJS必須だったものがCSSだけで完結する場面が増えています。

特に「:has()」は、「親を触れない問題」を解決してくれるので、実務だとかなり革命感ありました。

まとめ

「:has()」を有効に使えることで

・JavaScriptが減る
・class管理が減る
・実装がシンプルになる
・保守しやすい

最近のCSS、思っている以上に強すぎです。おいていかれないように日々勉強ですね。

それでは！