CSSに親セレクターはありますか?

Question

アンカー要素の直接の親である

要素を選択するにはどうすればよいですか?

たとえば、私の CSS は次のようになります:

li < a.active {
    属性: 値;
}

明らかに、JavaScript を使用してこれを実現することは可能ですが、私は CSS レベル 2 のネイティブな回避策を期待していました。

スタイルを設定しようとしているメニューは CMS によって生成されているため、アクティブな要素を

要素に移動できません...(テーマを設定しない限り)メニュー作成モジュールですが、それはやりたくないです）。

Answer 1

:has() CSS 疑似クラス を使用できます。

ただし、

ブラウザのサポートは制限されています (現在、Firefox ではサポートされていません)。

Answer 2

現時点では、CSS にはすべてのブラウザで要素の親を選択する方法はありません。

セレクター レベル 4 作業草案この機能を提供する :has()疑似クラスが含まれています。これは jQuery の実装 に似ていますが、現在 Firefox ではサポートされていません。

リーリー

Firefox は、現在デフォルトでサポートされていない唯一の主要ブラウザです。

それまでの間、完全なクロスブラウザ サポートを備えた親要素を選択する必要がある場合は、Firefox で JavaScript を使用する必要があります。