親セレクタ :has() を活用したコンテキスト依存スタイリングガイド

2025年10月27日

CSSの新機能 :has() とは｜親要素を直接スタイルできるセレクタ

CSS Selectors Level 4で定義された :has() 擬似クラスは、「子要素や兄弟要素の状態によって親要素へスタイルを適用できる」革新的な機能です。
これによりJavaScript不要で、よりメンテナブルなUIを実装できます。

具体例: 子inputがfocus状態のとき親labelにスタイル適用

label:has(input:focus) {
  color: #0066cc;
}

:has() 擬似クラスの仕様と書き方（A要素がBを含む場合）

A:has(B) {
  /* AがBに関係する場合に適用 */
}

主な特徴

親要素への条件付きスタイル適用が可能
子孫要素だけでなく兄弟関係にも適用可能
CSSのみでUIの状態管理が可能

対応ブラウザ状況（2025年時点）

ブラウザ	対応
Chrome / Edge	✅
Safari / iOS Safari	✅
Firefox	✅
Android Chrome	✅
Internet Explorer	❌

現代ブラウザであればほぼ利用可能です。

動作確認できる :has() サンプルコード集

サンプル1｜フォームバリデーションをCSSだけで実装

子inputがinvalid状態なら、.form-groupを赤枠に変更します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS :has() Form Validation</title>
<style>
.form-group {
  padding: 8px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 子inputがinvalidの場合に枠線強調 */
.form-group:has(input:invalid) {
  border-color: #e63946;
}
</style>
</head>
<body>
<h2>入力チェック例</h2>
<div class="form-group">
  <label>メールアドレス</label><br>
  <input type="email" required placeholder="email@example.com">
</div>

<div class="form-group">
  <label>必須入力</label><br>
  <input required placeholder="テキストを入力">
</div>
</body>
</html>

サンプル2｜空状態（Empty State）メッセージをCSSのみで表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS :has() Empty State</title>
<style>
.list {
  padding: 0;
  min-height: 50px;
}

/* liがない場合にメッセージ表示 */
.list:not(:has(li))::before {
  content: "アイテムがありません";
  color: #666;
}
</style>
</head>
<body>
<h2>空リストの例</h2>
<ul class="list"></ul>
</body>
</html>

サンプル3｜チェック状態に応じたTODOリストUI改善

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS :has() Todo UI</title>
<style>
.todo-item {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

/* チェック時に完了スタイル */
.todo-item:has(input:checked) {
  opacity: 0.5;
  text-decoration: line-through;
}
</style>
</head>
<body>
<h2>TODO管理例</h2>
<div class="todo-item">
  <input type="checkbox">
  <span>牛乳を買う</span>
</div>
<div class="todo-item">
  <input type="checkbox">
  <span>メール返信</span>
</div>
</body>
</html>

CSS :has() がUI/UX改善に役立つ理由

利点	説明
JavaScript削減	クラス操作やイベント監視が不要
メンテナンス性向上	スタイルロジックをCSSで完結
高い可読性	意図がCSSセレクタに直接反映
アクセシビリティ向上	状態管理がHTML構造に準拠

フォーム、アコーディオン、ナビゲーションUIなどで特に効果的です。