23195


先祖（つまり階層を遡ったすべての親）が特定のクラスを持たない要素をセレクタしたいと考えています。

:not(クラス) セレクタを利用すれば実現できそうですが、直接の親子でないと機能しませんでした

例えば  
.oya というクラスを持たない .ko と .mago にスタイルを適用させたい場合...  
(chrome)

:not(.oya)>.ko {...} ...効く  
:not(.oya)>.ko>.mago {...} ...効かない

:not(.oya) .ko {...} ...効かない  
:not(.oya) .mago {...} ...効かない

:not()セレクタに、直下ではなく配下を指定することはできないのでしょうか？  
仕様や他の実現方法について、アドバイスをよろしくお願いします。  
（jQueryなどでは比較的簡単なんですが...）

[code]

    :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;
    }
[/code]

[code]

    <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>
    </body>
[/code]


CC BY-SA 4.0
2016-03-16T10:14:26.690
23194
2019-12-13T18:53:59.700
2019-12-13T18:53:59.700
32986
8013
question
css
先祖の要素に特定のクラスを持たない要素のCSSセレクタについて


やりたいことを整理するとこういうことですね？

[code]

    div{padding-left: 1em}
    :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-b{
      color:#00ff00;
    }
[/code]

[code]

    ※括弧内が期待する結果
    <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>
[/code]

`:not(.oya-b)` は `*:not(.oya-b)` と等価で、クラスがoya-
bでない要素すべてにマッチします。`console.log(document.querySelectorAll(':not(.oya-b)')`
などとしてみるとわかりやすいですが、bodyをはじめとしたほとんどのタグがこれに該当します。その子孫にある `.ko-b`
ということですから、bodyなどの子孫にある `.ko-b` が該当します。

「先祖に`.oya-b`を持たない`.ko-b`」ではなく、「`.oya-b`以外を先祖に持つ`.ko-b`」です。

子セレクタの場合も「親に`.oya-a`を持たない`.ko-a`」ではなく「`.oya-a`以外を親に持つ`.ko-a`」ですが、これは同じ意味なので、あなたの期待通りに動いているというだけです。

jQueryでは `:not()` の中に `xx yy` といった複合セレクタを書くことができますが、CSS3の `:not()`
には単純なセレクタしか書くことができません。[CSS4では `:not()`
が強化されるようですが](http://myakura.github.io/n/selectors4.html#not-and-selector-
list)、それでも結合子は使えないようです。


CC BY-SA 3.0
2016-03-16T10:49:14.667
23195
2016-03-18T03:18:15.803
2016-03-18T03:18:15.803
8000
8000
23194
answer