こんにちは。CSSの海へようこそ。
フロントエンドの世界に足を踏み入れたばかりだと、CSSのルールって時に意地悪に感じますよね。「中身（子要素）が変わったなら、それ包んでいる箱（親要素）も一緒に雰囲気変えてくれればいいのに！」と、深夜のコーディングで何度叫びたくなったことか。
かつて、僕らフロントエンドエンジニアは、この「親の制御」のためにJavaScriptを書いては「重くなるから控えよう」と悩み、CSSだけで解決できる魔法をずっと夢見てきました。
そしてついに、その夢が叶いました。それが `:has()` です。
今日は、この「CSS界の革命児」を、身近な例を交えて紐解いていきましょう。大丈夫、コードはシンプルです。一緒に見ていきましょう。
—
:has() は「空気を読む」セレクタ
`:has()` を一言で言うと、「中身を見て、親の態度を変える」機能です。
想像してみてください。あなたはカフェの店員さんです。
- お客さんが「ケーキ」を注文したトレーは、ちょっと特別に「フォーク」を添えてあげたい。
- 「ドリンクだけ」なら、シンプルに。
これまでのCSSは「トレーそのもの」にしか指示を出せませんでした。でも、`:has()` を使えば、「ケーキが乗っているトレーだけ、背景色を薄いピンクにして、枠線を可愛くする」といったことが、CSSだけで完結するんです。
実際に書いてみよう：チェックボックスの例
Webサイトでよくある「選択したカードを強調する」UIを作ってみましょう。
/ CSS: ここからが魔法の時間です /
.card {
border: 2px solid #ccc;
padding: 20px;
transition: 0.3s; / ふわっと変化させるための魔法のスパイス /
}
/
これが :has() の正体！
「もし中にチェックされたinputがあれば、その親の.cardに対してこれを適用せよ」
/
.card:has(input:checked) {
border-color: #ff6b6b;
background-color: #fff0f0;
}
どうでしょう？ たったこれだけで、「選択した瞬間にカードの色が変わる」というインタラクティブなUIが完成しました。JavaScriptは一行も書いていません。これ、実はすごいことなんですよ。
なぜこれが「革命」なのか？
昔のCSSは、「上から下へ、あるいは隣へ」と流れるような指示しか出せませんでした。でも、現実は「中身の結果を受けて、入れ物が反応する」ことの方が多いですよね。
- エラーメッセージがある入力欄だけ、枠を赤く光らせる
- 画像がある記事カードだけ、レイアウトを少し広げる
これまでは「JavaScriptでクラスを付け替える」という泥臭い作業をしていた部分が、CSSのこの一行に集約されます。コードがスッキリすると、バグも減り、なによりメンテナンスが本当に楽になるんです。
現場のチーフアーキテクトからのアドバイス
`:has()` を使うときに、一つだけ気をつけてほしいことがあります。それは「親要素の状態を複雑に追いかけすぎないこと」です。
あまりに多くの場所で「もし中身がこうなら、親はこう…」と連鎖させすぎると、後からコードを見たときに「あれ、なんでこの色になってるんだっけ？」と迷子になってしまいます。
「あくまで、UIの状態をわかりやすくするために使う」
この心構えがあれば、あなたの書くCSSはぐっと洗練されたものになります。
—
最後に：失敗しても大丈夫
最初は、`:has()` の括弧の中に何を書けばいいのか迷うこともあるでしょう。「あれ、反応しないな？」と思ったら、それはきっとCSSの書き間違いではなく、HTMLの構造が少し違っているだけかもしれません。
そんな時は、深呼吸して、もう一度HTMLの「入れ子構造」を眺めてみてください。
「親の中に、本当にその要素が入っているかな？」と。
`:has()` は、CSSに「文脈を読む力」を与えてくれました。ぜひ、あなたのプロジェクトでも、この小さな魔法を試してみてください。きっと、CSSを書くのがもっと楽しくなるはずですよ。
それでは、また現場でお会いしましょう！応援しています。
コメント