こんにちは！CSSの世界へようこそ。
日々コードを書いていると、「隣にこれがある時だけ、こっちの見た目をちょっと変えたいんだよな……」なんて思うこと、ありませんか？
これまでのCSSは、基本的に「自分自身」か「子供」のことしか気にかけられない、ちょっと内向的な性格でした。でも、ついに登場した`:has()`という魔法のおかげで、CSSは「隣の様子を伺う」ことができるようになったんです。
今日は、この `:has()` を使った兄弟要素の制御術を、難しい専門用語は抜きにして、優しく紐解いていきましょう。
—
`:has()` は「空気を読む」ためのセレクタ
`:has()` を一言で言うと、「中身をチラ見して、自分の振る舞いを変える」ためのスイッチです。
想像してみてください。あなたはカフェの店員さんです。
- 「もし、お客様が『ケーキ』を注文したら、お皿に『フォーク』を添えよう」
- 「もし、注文の中に『テイクアウト』が含まれていたら、袋を用意しよう」
これまでのCSSは、自分のことだけで手一杯でした。しかし `:has()` を使うと、「隣の要素に何かがある（＝has）なら、自分自身を変える」という、人間味のある気配りができるようになるのです。
—
実践！「チェックが入ったら強調する」リスト
まずは、よくある「チェックボックス付きのリスト」で試してみましょう。チェックを入れた時に、その行全体がフワッと目立つようにする例です。
/ リストアイテムの中に、チェックされた（:checked）要素がある（:has）なら /
li:has(input[type=”checkbox”]:checked) {
/ 背景を明るい黄色にして、目立たせる！ /
background-color: #fffde7;
border-left: 5px solid #ffca28;
transition: 0.3s; / ちょっとしたアニメーションで優しく変化させます /
}
解説：
ここで注目してほしいのは、`li` に `:has()` をつけている点です。
「`li` さん、あなたの中にチェックが入った `input` がありますか？」と問いかけ、もし「はい（has）」なら、その `li` 自体にスタイルを適用しているんです。これまではJavaScriptで頑張っていた動きが、たったこれだけのCSSで完結してしまいます。
—
お買い物の例え：割引シールが貼ってある商品
もう一つ、少し実用的な例を。ECサイトの商品カードをイメージしてください。「セール中」というバッジがあるカードだけ、枠線を赤くしたいとします。
美味しいりんご
普通のバナナ
/ 「.badge」を持っている（has）カード（.card）だけを狙い撃ち /
.card:has(.badge) {
border: 2px solid #ff5252;
box-shadow: 0 4px 10px rgba(255, 82, 82, 0.2);
}
ここがつまずきポイント！
初心者の頃、「えっ、`.badge` を指定するんじゃないの？」と混乱しがちですよね。大丈夫です、私も最初はそうでした！
コツは、「最後にどうなりたいか（今回の場合はカード全体）」を左側に置くことです。
「バッジを持っているカード」という文法通りに、「カード `:has(バッジ)`」と書いてあげれば、自然とコンピューターも理解してくれます。
—
なぜ `:has()` が最強なのか
これまでも `+`（隣接セレクタ）などはありましたが、あれは「後ろの要素」しか制御できませんでした。しかし `:has()` は、「親」から「子」の状態を覗き見ることができるのが最大の特徴です。
- 「画像が含まれている記事カードだけ、レイアウトを変えたい」
- 「エラーメッセージが表示されている入力フォームだけ、枠を赤くしたい」
こうした現場の「あと少しだけ調整したい！」という欲求を、JavaScriptを使わずにCSSだけで完結できる。これは、サイトの表示速度を上げ、メンテナンスを楽にする、まさに現代のフロントエンドにおける「必殺技」なんです。
—
最後に：怖がらずに遊んでみてください
`:has()` は強力ですが、最初はうまく動かなくても落ち込まないでくださいね。「has（持っている）」という言葉の通り、「誰が何を持っているか」をパズルのように組み立てるのがコツです。
まずは「この要素の中に、あの要素が入っていたら……」と、身の回りのものを観察することから始めてみましょう。きっと、CSSを書くのがもっと楽しくなるはずです。
もし分からなくなったら、いつでもこのページに戻ってきてくださいね。あなたのWeb制作ライフを、これからもずっと応援しています！
コメント