1. ホーム
  2. css

[解決済み】アクティブな子の親のための複雑なCSSセレクタ【重複あり

2022-03-26 16:08:27

質問

クラス内の子要素のクラスに基づいて親要素を選択する方法はありますか? の素敵なメニュープラグインによって出力されるHTMLに関連する私に関連する例です。 http://drupal.org . 出力はこのようにレンダリングされます。

<ul class="menu">  
    <li>  
        <a class="active">Active Page</a>  
    </li>  
    <li>    
        <a>Some Other Page</a>  
    </li>  
</ul>  

質問は、activeクラスのついたアンカーを含むリストアイテムにスタイルを適用することが可能かどうかということです。 明らかに、私はリスト項目がアクティブとしてマークされることを望みますが、私は生成されるコードの制御を持っていないのです。 このようなことは、javascript(JQueryが思い浮かびます)を使用して実行できますが、CSSセレクタを使用してこれを行う方法があるかどうか疑問に思っています。

はっきりさせておきたいのは、アンカーではなく、リスト項目にスタイルを適用したいのです。

どのように解決するのですか?

残念ながら、CSSでそれを行う方法はありません。

JavaScriptではそれほど難しいことではありませんが。

// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;

// jQuery code:
$('.active').parent().get(0); // This would be the <a>'s parent <li>.