CSSに親セレクターは存在しますか?

Question

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

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

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

li < a.active {
    プロパティ: 値;
}

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

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

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

Answer 1

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

ただし、

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

Answer 2

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

Selectors Level 4 Working Draft には、この機能を提供する :has() 疑似クラスが含まれています。これは jQuery の実装 に似ていますが、現在 Firefox ではサポートされていません。

リーリー

現在、デフォルトでこの機能をサポートしていないのは Firefox だけです。 一方、完全なクロスブラウザサポートを備えた親要素を選択する必要がある場合は、Firefox で JavaScript を使用する必要があります。