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

Question

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

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

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

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

明らかに JavaScript を使用してこれを行う方法はありますが、CSS レベル 2 自体に何らかの回避策があることを願っています。

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

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

Answer 1

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

ただし、ブラウザのサポートは制限されています

(現在 Firefox ではサポートされていません)。

Answer 2

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

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

リーリー

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