CSSで子要素を持つ親要素にスタイルを適用する方法【jQuery・:has()活用】

CSS3には親要素セレクタが存在しない

CSS3の時点では、子要素の有無に応じて親要素へスタイルを適用する「親要素セレクタ」は存在しませんでした。CSS4の草案では、親要素を参照するための「$」記法が提案されており、次のように記述することで li 要素（親）を選択できる予定でした。

ul $li ul.sub { ... }

jQueryを使った代替方法

CSSだけでは実現できないため、従来はjQueryを活用するのが一般的な代替手段でした。1行で記述できるシンプルなコードがこちらです。

:has() セレクタは、指定したセレクタに一致する要素を1つ以上の子に持つすべての要素を選択します。<li> タグはリスト項目を、<ul> タグは順序なし（箇条書き）リストを定義するものです。

$('ul li:has(ul.sub)').addClass('has_sub');

このコードを実行すると、サブリスト（ul.sub）を含む li 要素に has_sub というクラスが自動的に付与されます。あとはCSSで li.has_sub に対してスタイルを定義するだけで、子要素の有無に応じた親要素のスタイリングが完成します。

li.has_sub { font-weight: bold; }

モダンCSSの :has() 疑似クラスなら純粋なCSSで実現可能

なお、近年の主要ブラウザではCSSの :has() 疑似クラスが実装されており、jQueryに頼らず純粋なCSSだけで親要素のスタイリングができるようになりました。

li:has(ul.sub) { font-weight: bold; }

Chrome・Safari・Edge・Firefoxなど主要ブラウザでサポート済みのため、新規プロジェクトではこちらの採用を検討する価値があります。レガシー環境をサポートする必要がある場合は、jQueryによるクラス付与の方法が今も有効です。