<li>アンカー要素の直接の親である要素を選択するにはどうすればよいですか?
たとえば、私の CSS は次のようになります。
li < a.active {
property: value;
}
明らかに、JavaScript を使用してこれを行う方法はありますが、CSS レベル 2 にネイティブに存在する何らかの回避策があることを期待しています。
スタイルを設定しようとしているメニューは CMS によって吐き出されているため、アクティブな要素を要素に移動できません<li>... (メニュー作成モジュールにテーマを設定しない限り、これはやりたくありません)。
ベストアンサー1
W3Cのセレクタレベル4ワーキングドラフトには以下が含まれています:has()擬似クラス次のような機能を提供します:
li:has(> a.active) { /* styles to apply to the li tag */ }
すべての主要ブラウザがこのセレクタをサポートしています。https://caniuse.com/css-has対象のブラウザまたはブラウザのバージョンがサポートされているかどうかを確認します。
対象ブラウザがこの機能を完全にサポートしていない場合は、JavaScript を使用する必要がある場合があります。