アクティブな親CSS

Question

私はいくつかのレベルのナビゲーションバーを持っています。今私はli自体がアクティブであるときにliの親をアクティブにすることを可能にしようとしています。 https://gyazo.com/32f1191aeaf1ec3ef312de2a029eddda

あなたが見ることができるように、relationsタブがアクティブになりました。私が持っているもの

。だから私が望むのは、オフィスのタブも同じ赤色を持つことです（ほんの一例）。

私はhover状態（li:hover > a）の解決策があることを知っているので、CSS専用の解決策があることを願っています。私はクリック可能なメニューを使用しています。そのため、liに.activeクラスを追加しています。

アクティブliは、ul li ul li.active a { color: red }のようになります。

ありがとうございます！

Answer 1

CSSでは、親>子方向でのみ設定可能なルールです。しかし、子>親ではありません。現在のケースでは、アクティブなクラスを追加/削除するために、親と子のクリックにハンドラを設定できます。しかし、JavaScriptを使用する必要があります。

Answer 2

Cssには親セレクタがありません。あなたはこれをすることはできません。 jsを使用します。