[解決済み] CSSの親セレクタはありますか？

質問

を選択するにはどうすればよいのでしょうか？ <li> アンカー要素の直接の親となる要素を教えてください。

例として、私のCSSは次のようなものです。

li < a.active {
    property: value;
}

もちろん、JavaScriptでこれを行う方法もありますが、CSS Level 2にネイティブに存在する何らかの回避策があることを期待しています。

私がスタイル付けしようとしているメニューはCMSによって吐き出されているため、アクティブな要素を <li> 要素で... (メニュー作成モジュールをテーマ化しない限りは、したくないのですが)。

何かアイデアはありますか？

解決方法は？

現在、CSSで要素の親を選択する方法はありません。

もし、その方法があれば、現在のCSSセレクタの仕様のどちらかに入っているはずです。

• セレクタレベル3仕様
• CSS 2.1セレクタ仕様

とはいえ セレクタレベル4作業草案 には :has() 擬似クラスは、この機能を提供します。これは jQueryの実装 .

li:has(> a.active) { /* styles to apply to the li tag */ }

ただし、2021年時点では は、まだどのブラウザでもサポートされていません。 .

一方、親要素を選択する必要がある場合は、JavaScriptに頼らざるを得ません。