☰

アクティブな子の親のための複雑な CSS セレクター [重複] 質問する

tag-icon • tag-icon css css-selectors
アクティブな子の親のための複雑な CSS セレクター [重複] 質問する

クラス内の子要素のクラスに基づいて親要素を選択する方法はありますか？私にとって関連する例は、素晴らしいメニュープラグインによるHTML出力に関連しています。http://drupal.org出力は次のようになります。

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

私の質問は、アクティブ クラスのアンカーを含むリスト項目にスタイルを適用できるかどうかです。もちろん、リスト項目をアクティブとしてマークしたいのですが、生成されるコードを制御することはできません。この種のことは JavaScript (JQuery が思い浮かびます) を使用して実行できますが、CSS セレクタを使用してこれを行う方法があるかどうか疑問に思っています。

明確にするために、アンカーではなくリスト項目にスタイルを適用したいと思います。

ベストアンサー1

Wikipediaによると:

セレクターは昇格できない

CSS では、特定の基準を満たす要素の親または祖先を選択する方法がありません。より高度なセレクター スキーム (XPath など) を使用すると、より洗練されたスタイルシートが可能になります。ただし、CSS ワーキング グループが親セレクターの提案を拒否する主な理由は、ブラウザーのパフォーマンスと増分レンダリングの問題に関連しています。

そして、将来 SO を検索する人にとっては、これは祖先セレクターとも呼ばれるかもしれません。

アップデート：

のセレクター レベル 4 スペック選択範囲のどの部分を主題にするか選択できます。

セレクターの主題は、セレクター内の複合セレクターの 1 つにドル記号 ($) を付加することで明示的に識別できます。セレクターが表す要素構造はドル記号の有無にかかわらず同じですが、このように主題を示すと、その構造内の主題を表す複合セレクターが変わる可能性があります。

例1:

たとえば、次のセレクターは、順序付きリスト OL の一意の子であるリスト項目 LI を表します。

OL > LI:only-child

ただし、次のリストは、一意の子 (その子は LI) を持つ順序付きリスト OL を表します。

$OL > LI:only-child

これら 2 つのセレクターによって表される構造は同じですが、セレクターの主題は異なります。

ただし、これはどのブラウザでも、また jQuery のセレクターとしても利用できません (現在、2011 年 11 月)。

おすすめ記事