CSSの世界へようこそ！フロントエンドの最前線で日々コードと格闘している私から、今日はCSS界の「革命児」、`:has()` 擬似クラスについてお話しします。
これまでCSSを書いていて、「この中のボタンがクリックされた時だけ、外側の枠を赤くしたいんだけど……」と、泣く泣くJavaScriptを書いていた経験はありませんか？
実は、そんな苦労も今日で終わりかもしれません。`:has()` は、CSSに「親心」を教えてくれる魔法のような機能なんです。
—
親セレクタの夢、「:has()」って何者？
これまでのCSSは、基本的に「上から下へ、あるいは自分自身」にしか命令を出せませんでした。親要素が子要素の状態を気にするなんて、とんでもないことだったんです。
でも、`:has()` を使うと、「もし中に◯◯が入っていたら、自分（親）の見た目を変える」ということが可能になります。
例え話をしましょう。
「お買い物のカゴ」を想像してください。普段はただのプラスチックのカゴですが、中に「重たいスイカ」が入った瞬間、カゴの底が少し頑丈になったり、持ち手が太くなったりしたら便利ですよね？
`:has()` は、まさにそれです。「カゴの中に何が入っているか」をチェックして、カゴの外側のデザインを書き換えてくれる。そんな賢い機能なんです。
—
実際に書いてみよう！
言葉だけではイメージしにくいですよね。まずは一番シンプルな例を見てみましょう。
/ 「もし中に ‘is-active’ というクラスがついたボタンがあったら」 /
/ その親である .card 全体の枠線を青くする /
.card:has(.is-active) {
border: 2px solid blue;
background-color: #f0f8ff; / 薄い青で強調 /
}
どうでしょう？ 今までなら「JavaScriptでクラスを付け替えて……」と奮闘していた処理が、これだけで完結してしまいます。CSSだけでここまで表現できるなんて、本当にワクワクしませんか？
—
現場で役立つ「こんな時」
`:has()` は、ただ便利なだけじゃありません。実は「UX（ユーザー体験）」を爆上げするポテンシャルを秘めています。
1. フォームの入力項目を強調する
ユーザーが入力中の項目だけ、親のグループ全体をハイライトする。これがあるだけで、ユーザーは「今、どこを操作しているか」が直感的にわかります。
/ inputにフォーカスが当たっている時、その親の .form-group を目立たせる /
.form-group:has(input:focus) {
background-color: #fff9db;
border-left: 5px solid orange;
}
2. 画像の有無でレイアウトを変える
ブログの記事一覧などで、「画像がある記事だけレイアウトを変えたい」という時も簡単です。
/ img要素を持っている時だけ、レイアウトを二段組にする /
.post:has(img) {
display: grid;
grid-template-columns: 1fr 2fr;
}
—
つまずきそうなポイント：大丈夫、怖くないですよ！
`:has()` を使い始めると、「あれ？効かない？」ということが稀にあります。特に初心者が陥りやすい罠を2つだけお伝えしますね。
- 「親要素」自体はスタイルできない？
`:has()` はあくまで「条件判定」をする場所です。ブラウザによっては、`:has()` の中で複雑すぎる指定をすると計算が重くなることがあります。まずはシンプルに「色を変える」「枠線を変える」といった見た目の変更から試してみてくださいね。
- ブラウザの対応状況
最近の主要なブラウザ（Chrome, Safari, Edge, Firefoxなど）はほとんど対応していますが、古い環境で動かそうとすると「何も起きない」という状態になります。「動かなくても致命的ではない」デザインの改善に使うのが、プロの現場でのスマートな戦略です。
—
最後に：CSSはもっと自由になれる
`:has()` は、単なる新しい書き方ではありません。CSSという言語が「賢くなった」という大きな転換点です。
最初は難しく感じるかもしれませんが、まずは「これ、`:has()` でできそうかな？」と、自分の書いているコードを眺めてみてください。その小さな好奇心が、あなたの書くCSSを、もっとエレガントで、もっとメンテナンスしやすいものへと変えていくはずです。
もしコードが動かなくても大丈夫。私も最初はエラーばかりでした。まずはブラウザの検証ツールを開いて、あちこち実験してみてください。その泥臭い試行錯誤こそが、あなたを本物のフロントエンド・エンジニアへと成長させる一番の近道ですからね！
さあ、次はどんな「親心」をコードに込めてみますか？
コメント