先祖の要素に特定のクラスを持たない要素のCSSセレクタについて
先祖(つまり階層を遡ったすべての親)が特定のクラスを持たない要素をセレクタしたいと考えています。
:not(クラス) セレクタを利用すれば実現できそうですが、直接の親子でないと機能しませんでした
例えば
.oya というクラスを持たない .ko と .mago にスタイルを適用させたい場合...
(chrome)
:not(.oya)>.ko {...} ...効く
:not(.oya)>.ko>.mago {...} ...効かない
:not(.oya) .ko {...} ...効かない
:not(.oya) .mago {...} ...効かない
:not()セレクタに、直下ではなく配下を指定することはできないのでしょうか?
仕様や他の実現方法について、アドバイスをよろしくお願いします。
(jQueryなどでは比較的簡単なんですが...)
https://jsfiddle.net/kgbpcjdz/ < 実際のコード
<body>
<div class="oya-a">
親A
<div class="ko-a">
子A
<div class="mago-a">孫A</div>
</div>
</div>
<div class="ko-a">
子A
<div class="mago-a">孫A</div>
</div>
<hr />
<div class="oya-b">
親B
<div class="ko-b">
子B
<div class="mago-b">孫B</div>
</div>
</div>
<div class="ko-b">
子B
<div class="mago-b">孫B</div>
</div>
<style>
:not(.oya-a)>.ko-a{
color:#ff0000;
}
:not(.oya-a)>.ko-a>.mago-a{
color:#00ff00;
}
:not(.oya-b) .ko-b{
color:#ff0000;
}
:not(.oya-b) .mago-a{
color:#00ff00;
}
</style>
</body>