こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
CSSでは長らく「親要素」に条件付きのスタイルを当てることができず、JavaScriptを使わなければ実現できないシーンが多くありました。
しかし、ついにその常識を覆す機能が登場しました。
それが、CSSの:has()擬似クラスです。
この記事では、Webデザイナー初心者から中・上級者までに役立つよう、:has()の基本から実務で使える応用例、対応ブラウザや注意点まで丁寧に解説します!
`:has()`とは？CSSで親要素にスタイルをつけられる唯一の方法
これまでのCSSは、「親 → 子」へのスタイル適用は可能でしたが、「子 → 親」へのスタイルの反映はできないという制限がありました。
たとえば、「ある子要素が存在するときに親要素の色を変える」といったことはJavaScriptでDOMを操作しないと実現できなかったのです。
ですが、:has()擬似クラスを使えば、
CSSだけで「子要素の状態に応じて親要素にスタイルを当てる」ことが可能になります。
基本的な構文と使用例
.card:has(img) { border: 2px solid blue; } このコードでは、.card要素の中にimgタグがある場合、その.cardにだけ青いボーダーが付きます。これまでは実現が難しかったスタイルが、CSSだけでシンプルに書けるようになりました。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
画像がある.cardだけに枠線をつけたい、ボタンがあるときだけ背景を変えたい、など、UI演出の自由度が格段に広がります!
実務で使える`:has()`活用例5選
- 未入力のフォームフィールドに警告表示
フォームのinput:invalidなどを子としてチェックし、親のフォーム枠に警告スタイルを追加できます。 - 商品カードにボタンがあるときだけ影を強調
CTAボタンの有無でスタイルを切り替え、重要な商品を目立たせられます。 - 在庫なしラベルがある場合だけ背景をグレーに
.product:has(.soldout)のように、在庫切れの商品カードにだけ明確な視覚差を与えられます。 - ドロップダウンがあるナビにだけ矢印表示
.nav-item:has(ul)で、サブメニューを持つナビだけ矢印アイコンを出せます。 - 任意の子classに応じて親に条件付きデザイン
.block:has(.highlight)などで、特別な状態の子を含むブロックに装飾ができます。
対応ブラウザ状況（2025年最新版）
2025年5月現在、以下のブラウザで:has()がサポートされています。
- Google Chrome（バージョン105以上）
- Safari（バージョン15.4以上）
- Microsoft Edge（Chromiumベース）
Firefoxでは、2025年5月時点で:has()は未対応です。使用する際は、ユーザーのブラウザ環境を考慮しましょう。
パフォーマンスや注意点
:has()は非常に強力なセレクタですが、DOM構造が複雑なページで多用すると、レンダリングパフォーマンスに影響を及ぼす可能性があります。
特に、動的に要素が増減するSPA（シングルページアプリケーション）などでは、無計画に使うとスタイル適用に時間がかかるケースも報告されています。
`:has()`が使えることで実現できるUIの進化
たとえば、以下のような「子の状態に応じた親のデザイン変更」がCSSだけで完結できます。
.form-group:has(input:invalid) { background-color: #ffecec; border: 1px solid red; } このように、「エラー状態のフィールドが含まれている」場合だけフォーム全体を赤くすることが可能になります。従来のようにJSでイベントを拾ってクラスを付与するといった手間が不要です。
まとめ：CSSだけで表現の幅が格段に広がる
:has()の登場によって、CSSだけでインタラクション豊かなUIが作れる時代が到来しました。
もちろんまだすべてのブラウザで使えるわけではありませんが、今後の普及を見越して部分的に導入し、徐々に応用範囲を広げていくことが推奨されます。
Web制作の現場でも活用の幅が広がる:has()、ぜひこの機会に習得して、クリーンで柔軟なCSS設計を目指しましょう。
関連記事
静岡県浜松市でWebサイト制作・CSS設計・UI改善などをご希望の方は、お気軽にsatokotadesignにご相談ください。
satokotadesignキャンペーン実施中！
