CSSの:has() セレクタがすごい！親要素から子要素を見てスタイルを変える方法｜ブログ

はじめに CSSでは今まで「子や孫要素にスタイルを当てること」はできても、 子の状態によって親にスタイルを適用するのは難しいことでした。 それを解決するのが、:has() 擬似クラスセレクタです。 :has() の基本構文 親セレクタ:has(条件となる子) { スタイル; } 例： .card:has(img) { border: 2px solid green; } → .card の中に\ があるときだけ、ボーダーがつきます。 実際に使ってみる（HTML＋CSS） HTML: 見出し1 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

見出し1 見出し2 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

CSS: h1 { margin-bottom: 80px; } h1:has(+ h2) { margin-bottom: 10px; } CSS: h1タグが弟要素にh2タグを持っていない→余白が広い（margin-bottom: 80px;） h1タグが弟要素にh2タグを持っている →余白が狭い（margin-bottom: 10px;） 他にもいろいろ使える！活用例 \1. チェックボックスがONのときだけ背景色を変える label:has(input:checked) { background-color: #e0ffe0; } →input:checked が中にあるlabel だけスタイルを変えられます。 \2. 入力が空のフォームだけ赤枠にする form:has(input:invalid) { border: 2px solid red; } → 入力が無効なフォームだけを強調できます。 まとめ | 機能 | できること | | --- | --- | | :has() | 子の状態に応じて親にスタイルを適用できる | | 利用例 | チェック状態、画像の有無、入力エラーなど | :has() セレクタを使いこなすことで、CSSだけでこれまで以上に柔軟な表現が可能になります。 ぜひいろいろな場面で試してみてください！