WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： furuhashi
カテゴリー： マークアップ >CSS

2023年以降、CSSに革命が起きました。それが :has() 擬似クラスの登場です。

これまでCSSは「子要素にスタイルを適用する」ことは得意でしたが、「子要素の状態に応じて親要素にスタイルを当てる」ことはできませんでした。そのため、ちょっとした見た目の変化にもJavaScriptを使わざるを得ない場面が多く、悩まされてきた方も多いのではないでしょうか？
この記事ではそんな悩みを解決できる便利なCSSをご紹介します。

:has() とは？

CSSの :has() 擬似クラスは、「指定した子孫要素を持っているかどうか」を条件に、親要素にスタイルを適用できる画期的な機能です。

.card:has(img) {
  border: 2px solid green;
}

このコードでは、.card の中に img タグが含まれている場合、その .card に緑色の枠線が付きます。

実用例①：入力エラー時のフォーム強調

See the Pen
Untitled by qam (@qam)
on CodePen.

入力エラーがある .form-group の背景が赤く変わります。JavaScriptなしでバリデーションに反応させられるのは大きなメリットです。

実用例②：チェックボックスで親を切り替える

See the Pen
【CSS Tips】:has() 擬似クラスの活用法2 by qam (@qam)
on CodePen.

チェック済みのタスクだけをスタイル変更できます。

実用例③：ボタン内にアイコンがあるときだけ余白追加

See the Pen
【CSS Tips】:has() 擬似クラスの活用法3 by qam (@qam)
on CodePen.

中にアイコンがあるボタンだけに余白をつけられます。これも従来はJavaScriptが必要でした。

注意：ブラウザ対応状況

2025年6月現在、主要ブラウザでの対応は以下のとおりです。

ブラウザ 対応状況

• Chrome 対応済み（v105〜）
• Edge 対応済み
• Safari 対応済み（v15.4〜）
• Firefox 非対応（※開発中）

現時点で Firefox では動作しないため、利用の際は「フォールバックCSS」やJavaScriptとの併用を検討するのが安全です。

:has() の活用アイデアまとめ

• 子要素にエラー・チェック状態があるときだけ親の見た目を変える
• 子要素の存在によって親レイアウトを調整する
• スライダーやカルーセルの状態でナビゲーションスタイルを変更する

おわりに

:has() 擬似クラスは、CSSでできることを一気に広げてくれるとても便利な機能です。JavaScriptを使わずに親要素へ影響を与えられることで、コードの可読性・保守性も向上します。
ぜひも使ってみてはいかがでしょうか。