CSS :has() 使い方｜実務パターン15選と検証結果

CSSの :has() とは、「指定した条件に当てはまる要素を中に（または後ろに）持つ要素」を選ぶ擬似クラスです。これまでJavaScriptが必要だった「子の状態に応じて親の見た目を変える」「後ろの兄弟に応じて前の要素を変える」がCSSだけで書けます。

この記事では、実務でよく使う 15パターンをコピペ用のHTML＋CSSで紹介 し、すべて Playwright ＋ Chromium 141 で 適用前と適用後の getComputedStyle の値を実測 しました（画像の代わりに値で結果を示しています）。あわせて、:is() / :where() との違い、詳細度の意外な決まり方、無効なセレクタを含めたときの挙動、対応状況（Baseline）、@supports でのフォールバック、パフォーマンスの注意点まで実行結果つきでまとめます。

:has() 実務パターン早見表

:has() の基本と書き方

「親セレクタ」と呼ばれることが多いですが、+ や ~ を使うと「前の兄弟」も選べます。

検証環境

// 確認に使った関数（Playwright）
const cs = (sel, prop, pseudo = null) => page.evaluate(([s, pr, ps]) =>
  getComputedStyle(document.querySelector(s), ps).getPropertyValue(pr), [sel, prop, pseudo]);

フォームで使う :has()

パターン1：入力エラーのある欄の枠を赤くする

<div class="field"><input type="email" placeholder="mail@example.com"></div>

.field { border: 2px solid rgb(203, 213, 225); }
.field:has(input:invalid:not(:placeholder-shown)) { border-color: rgb(220, 38, 38); }

:not(:placeholder-shown) を付けると、何も入力していない初期状態では赤くなりません。入力欄そのものではなく、囲んでいる .field（ラベルやヘルプ文を含む枠）の見た目を変えられるのが :has() の利点です。操作後にだけ判定したい場合は :user-invalid も選択肢です。

パターン2：必須が未入力の間は送信ボタンをグレーにする

<form class="p2">
  <input required placeholder="氏名">
  <button type="submit">送信</button>
</form>

form.p2 button[type="submit"] { background-color: rgb(37, 99, 235); }
form.p2:has(:required:placeholder-shown) button[type="submit"] {
  background-color: rgb(148, 163, 184);
  pointer-events: none;
}

見た目の制御なので、送信の可否は必ずサーバー側やJSのバリデーションでも確認 します。pointer-events: none だけではキーボード（Enterキー）での送信は止まりません。

パターン14：必須項目のラベルに「*」を付ける

<label for="n2">氏名</label><input id="n2" required>
<label for="n3">備考</label><input id="n3">

label:has(+ input:required)::after { content: " *"; color: rgb(220, 38, 38); }

HTMLの required 属性だけを管理すれば、ラベルの印が自動でそろいます。:has() の後ろに ::after を付けるのは有効です（:has() の中に擬似要素を書くのは無効。後述）。

パターン13：入力中の検索欄を強調する

<div class="search"><input placeholder="検索"></div>

.search:has(input:focus-visible) { box-shadow: rgb(37, 99, 235) 0px 0px 0px 3px; }

単に「中のどれかにフォーカスがある」なら :focus-within でも書けます。:has() を使うと「入力欄の :focus-visible のときだけ」「特定の子のときだけ」と条件を絞れます。

レイアウトを切り替える :has()

パターン3：画像があるカードだけ2列にする

<div class="card"><img src="thumb.jpg" alt=""><p>画像あり</p></div>
<div class="card"><p>画像なし</p></div>

.card { display: grid; grid-template-columns: 1fr; }
.card:has(> img) { grid-template-columns: 120px 1fr; }

CMSから出力されるHTMLが同じクラス名でも、中身に応じてレイアウトが変わります。サーバー側で card--with-image のようなクラスを付け分ける処理が不要になります。

パターン6：子の数でグリッドの列数を変える

<div class="grid"><div>1</div><div>2</div><div>3</div></div>
<div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div></div>

.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }

:has(> :nth-child(4)) は「4番目の子がある」＝「子が4個以上」という意味 です。「ちょうど4個」にしたい場合は :has(> :nth-child(4):last-child) と組み合わせます。

パターン7：後ろの兄弟に応じて前の要素を変える

<h2>見出しA</h2><p class="lead">リード文</p>
<h2>見出しB</h2><p>本文</p>

h2 { margin-bottom: 24px; }
h2:has(+ .lead) { margin-bottom: 4px; }

+ で「すぐ後ろの兄弟」、~ で「後ろのどこかの兄弟」を条件にできます。見出しとリード文を近づける、といった余白調整に便利です。

パターン8：中身が空のときメッセージを出す

<ul class="list"></ul>
<p class="empty-msg">まだタスクはありません</p>

.empty-msg { display: none; }
.list:not(:has(> li)) + .empty-msg { display: block; }

:empty は空白文字やコメントがあると一致しませんが、:not(:has(> li)) なら「li がない」を直接判定できます。

JavaScriptなしで状態を切り替える :has()

パターン4：チェックでメニューを開閉する

<nav class="nav">
  <label><input type="checkbox" id="menu-toggle">メニュー</label>
  <ul class="menu"><li>ホーム</li></ul>
</nav>

.nav .menu { display: none; }
.nav:has(#menu-toggle:checked) .menu { display: block; }

チェックボックスとメニューが兄弟でなくても、共通の親を起点に書けます。以前の input:checked ~ .menu はHTMLの並び順に制約がありましたが、:has() なら位置を自由にできます。本番では、開閉状態を支援技術に伝えるため <details> やボタン＋aria-expanded も検討します。

パターン5：モーダル表示中はページをスクロールさせない

<dialog id="dlg">モーダル</dialog>
<script>document.getElementById('dlg').showModal();</script>

html:has(dialog[open]) { overflow: hidden; }

開閉のJSにスクロール固定の処理を書き足す必要がなくなります。ページ全体（html）を起点にするセレクタなので、中の条件は dialog[open] のように 絞り込んだもの にしておきます（パフォーマンスの節を参照）。

パターン9：チェックボックスでダークモードを切り替える

<label><input type="checkbox" id="dark">ダークモード</label>
<div class="page">ページ</div>

:root { --bg: rgb(255, 255, 255); }
:root:has(#dark:checked) { --bg: rgb(17, 24, 39); }
.page { background-color: var(--bg); }

CSS変数（カスタムプロパティ）を :root で切り替えると、ページ中の色がまとめて変わります。選択を次回も保持したい場合は、JSで localStorage に保存して復元します。

パターン10：チェックした行をハイライトする

<table><tbody>
  <tr><td><input type="checkbox"></td><td>備品A</td></tr>
</tbody></table>

tr:has(input[type="checkbox"]:checked) { background-color: rgb(254, 249, 195); }

パターン11：選択中のプランカードを強調する

<label class="plan"><input type="radio" name="plan">ライト</label>
<label class="plan"><input type="radio" name="plan">スタンダード</label>

.plan { border: 2px solid rgb(203, 213, 225); }
.plan:has(input[type="radio"]:checked) { border-color: rgb(37, 99, 235); }

パターン12：ホバー中以外の画像を薄くする

<div class="gallery"><img src="a.jpg" alt=""><img src="b.jpg" alt=""></div>

.gallery:has(img:hover) img:not(:hover) { opacity: 0.4; }

「ギャラリーのどれかにホバー中」を親で判定し、ホバーしていないものだけ薄くします。

パターン15：すべてチェックしたら完了メッセージを出す

<div class="tasks">
  <label><input type="checkbox">A</label>
  <label><input type="checkbox">B</label>
  <p class="done-msg">すべて完了しました</p>
</div>

.done-msg { display: none; }
.tasks:not(:has(input[type="checkbox"]:not(:checked))) .done-msg { display: block; }

「未チェックのものを持たない」＝「すべてチェック済み」という二重否定の書き方 です。

:is() / :where() との違いと詳細度

検証1：無効なセレクタを混ぜたとき

.x:has(.a, :foo) { color: rgb(255, 0, 0); }   /* :foo は存在しない擬似クラス */
.x:is(.a, :foo)  { color: rgb(0, 128, 0); }

スタイルシートの cssRules を読み出した結果です。

[ '.x:is(.a)', '.box:has(#target)', … ]

:is() の規則は :foo だけを取り除いて .x:is(.a) として残りましたが、:has() の規則は丸ごと読み込まれませんでした。:has() の中で新しい擬似クラスを使うときは、未対応ブラウザで規則全体が無視されることを想定しておきます。

検証2：詳細度は「一致した引数」ではなく「最も高い引数」

<div class="box3 k l"><span class="item">I</span></div>

.box3:has(> .item, .item .deep #t3) { outline: 1px solid rgb(0, 0, 0); }
.box3.k.l { outline-color: rgb(0, 128, 0); }

b3 outlineColor => rgb(0, 0, 0)

実際に一致したのは > .item ですが、詳細度は引数の中で最も高い .item .deep #t3（IDを含む）で計算されるため、クラス3つの .box3.k.l に勝ちました。意図しない上書きを防ぐには、ID を引数に入れない、または :where() で包みます。

検証3：:where() で包むと詳細度を0にできる

.box2:where(:has(#t2)) { color: rgb(220, 38, 38); }
div.box2 { color: rgb(37, 99, 235); }

.box:has(#target) { color: rgb(220, 38, 38); }
.box.alt.more { color: rgb(37, 99, 235); }

ライブラリやデザインシステムで「上書きしやすい既定スタイル」を作るときは :where(:has(…)) が便利 です。

書けないこと・注意点

対応状況（Baseline）とフォールバック

npm の web-features と @mdn/browser-compat-data（8.1.3）で確認した結果です。

2026年6月に Baseline Widely available になり、主要ブラウザの現行版では安心して使える段階 です。古い端末も対象にする場合は @supports selector() で切り替えます。

/* :has() が使えないブラウザ向けの表示 */
@supports not selector(:has(a)) {
  .fallback { display: block; }
}
/* :has() が使えるブラウザでは隠す */
@supports selector(:has(a)) {
  .fallback { display: none; }
}

Chromium 141 では .fallback の display が none（:has() 対応側）になりました。

// JavaScript で判定する場合
if (CSS.supports('selector(:has(a))')) {
  // :has() 対応
}

パフォーマンスの注意点

:has() は子や兄弟の変化で親のスタイルを再計算するため、「どこを起点に」「どこまで探すか」を絞る のが基本です。MDNの :has() ページでも、広い起点（body、:root、*）を避け、> や + で探索範囲を限定する書き方が推奨されています。

ページ全体の状態（モーダル、テーマ）を扱うときは html:has(dialog[open]) や :root:has(#dark:checked) のように、引数を属性やIDで絞る と探索の対象が限定されます。大量の行を持つ一覧で :has() を使う場合は、DevTools の Performance パネルで「Recalculate Style」の時間を確認してから採用すると安心です（本記事では速度の計測は行っていません）。

よくある失敗と直し方

よくある質問

Q. :has() は「親セレクタ」ですか？ A. 親を選ぶ用途が多いですが、正確には「条件に合う要素を中や後ろに持つ要素」を選びます。h2:has(+ .lead) のように前の兄弟を選ぶこともできます。

Q. :has() はもう本番で使えますか？ A. Chrome/Edge 105、Safari 15.4、Firefox 121 以降で対応し、2026年6月19日に Baseline Widely available になりました。古い端末も対象にする場合は @supports not selector(:has(a)) でフォールバックを用意します。

Q. :has() と :focus-within はどう使い分けますか？ A. 「中のどこかにフォーカスがある」だけなら :focus-within が簡潔です。「入力欄の :focus-visible のときだけ」など条件を絞りたいときに :has() を使います。

Q. :has() を使うとページが重くなりますか？ A. 起点と探索範囲を絞れば通常の用途で問題になることは少ないです。*:has() や body:has(.広い条件) を避け、> や + で範囲を限定します。大規模な一覧ではDevToolsで確認してから採用します。

まとめ

• :has() は「条件に合う要素を中や後ろに持つ要素」を選ぶ擬似クラス で、親や前の兄弟をCSSだけで変えられます。
• フォーム・カード・メニュー・モーダル・テーブルなど15パターンすべて、Chromium 141 で適用前後の値の変化を確認 しました。
• 詳細度は「一致した引数」ではなく「引数の中で最も高いもの」 になり、:where() で包むと0にできます。
• 無効なセレクタを含むと :has() の規則は丸ごと無視され、:is() は無効部分だけ除かれました。
• :has() の入れ子と、引数内の擬似要素は使えません（後ろに ::after を付けるのは可）。
• 2026年6月に Baseline Widely available。古い環境には @supports selector(:has(a)) で対応します。
• 起点を絞り、> や + で探索範囲を限定 すると、パフォーマンス面でも扱いやすくなります。

株式会社RJCでは、:has() のような新しいCSSの機能を実際に動かして確かめ、プロジェクトの中で仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。