超絶便利、CSSの:has()の使い方

CSSにもついに“親要素を条件で選べる”時代がやってきました。
そう、:has()擬似クラスです。

これまでJavaScriptでしか実現できなかった「親要素が子要素の状態を参照する」ような条件分岐が、CSSだけで完結できるようになったのです。
まさにCSSの世界における「親セレクタ降臨」！

本記事では、:has()の基本的な使い方から、実際に役立つ具体例までを紹介します。

:has()って何？

CSSの:has()擬似クラスは、「要素が特定の子要素や状態を持っているかどうか」を判定できる親セレクタです。
つまり、「中に○○があったら、この親要素にスタイルを当てる」という指定ができます。

/ 例：子要素に画像があるdivに枠線をつける /
div:has(img) {
  border: 2px solid #00bcd4;
}

どのブラウザで使えるの？

2025年現在、モダンブラウザ（Chrome、Edge、Safari、Firefox）では基本的に対応しています。
※古いバージョンのIEや、レガシー環境では非対応の可能性があるので、使用前にサポート状況を確認しましょう。

超便利な使用例6選！

1：入力があるフォームだけ目立たせる

form:has(input:focus) {
  outline: 2px solid #2196f3;
}

→ ユーザーが操作しているフォームにだけスタイルを付けられます。

2：チェックボックスがONのとき、ラベルの色を変える

label:has(input:checked) {
  background-color: #4caf50;
  color: white;
}

→ JavaScriptなしでトグルっぽいUIが作れる！

3：空じゃないフィールドにだけ枠線を付ける

input:has([value]) {
  border: 1px solid green;
}

※厳密には:has()より:not(:placeholder-shown)のほうが向いているケースもあります。

4：子にエラー要素があるフォームだけ赤くする

form:has(.error) {
  border: 1px solid red;
}

→ フォームバリデーションの見た目をCSSで完結！

5：リストの中に特定のアイテムがある場合の装飾

ul:has(li.special) {
  background-color: #ffeb3b;
}

→ 特定の条件を満たすコンテンツがある場合の強調に便利。

6：画像が含まれていない記事だけにデフォルトの背景をつける

article:not(:has(img)) {
  background-color: #f9f9f9;
}

→ 記事に画像が入っていないときだけ、視認性を上げる目的で背景を変えることができます。

注意点

• パフォーマンス面では、重いDOM構造で多用すると若干の影響が出ることも。
• セレクタのネストや複雑な条件分岐は、慎重に使いましょう。
• レガシーブラウザのサポートが必要な場合は、フォールバックが必要。

まとめ

:has()は、CSSでの表現力を一気に拡張してくれる強力なツールです。
「JavaScriptでやってたあれ」がCSSで書ける時代、もう来てます。

まずは小さなUI改善から、ぜひ使ってみてください！