Webデザインの世界では、親要素が特定の子要素を持つ場合にのみスタイリングを適用する必要があることがよくあります。これまで、このような要件はJavaScriptを使わなければ実現できないことが多かったですが、CSS4で導入された :has() 疑似クラスを使えば、CSSだけでこの問題を解決することができます。
:has() 疑似クラスとは？
:has() 疑似クラスは、特定の子要素を持つ親要素に対してスタイルを適用するためのCSSセレクタです。この強力なツールを使用すると、親子関係に基づいたスタイリングが簡単に行えます。
実際の使い方
具体的な使用例を見てみましょう。以下のCSSは、クラス parent を持つ要素の中にクラス child を持つ子要素が含まれている場合に、親要素の背景色を黄色に変更します。
.parent:has(.child) {
background-color: yellow;
}HTMLの例
以下のHTMLコードと上記のCSSを組み合わせると、実際にどのように動作するかがわかります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS :has() Example</title>
<style>
.parent:has(.child) {
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">This is a child element.</div>
</div>
<div class="parent">
This parent does not have a child element.
</div>
</body>
</html>このコードを実行すると、クラス child を持つ子要素を含む .parent 要素だけが黄色の背景色になります。一方、子要素を持たない .parent 要素はスタイルが適用されません。
ブラウザの互換性
:has() 疑似クラスは非常に便利ですが、CSS4で導入された新しい機能であるため、すべてのブラウザでサポートされているわけではありません。最新のブラウザではサポートされていますが、使用する際にはターゲットとするユーザーのブラウザの互換性を確認することが重要です。
現在のサポート状況
2024年現在、以下のブラウザで :has() 疑似クラスがサポートされています。
- Google Chrome: バージョン 105 以降
- Mozilla Firefox: バージョン 103 以降
- Microsoft Edge: バージョン 105 以降
- Safari: バージョン 15.4 以降
しかし、古いバージョンのブラウザや、サポートが限定的なブラウザでは動作しない可能性があるため、プロジェクトの要件に応じて適切に対応する必要があります。
まとめ
CSSの :has() 疑似クラスを使用すると、特定の子要素を持つ親要素に対して簡単にスタイルを適用することができます。この機能は、これまでJavaScriptを使用していた多くのケースにおいて、CSSだけで解決できるようになるため、Web開発者にとって非常に有益です。今後のプロジェクトでぜひ活用してみてください。
