css - 特定の要素内にない要素の選択

Question

CSS3を使用して、特定のクラスの要素内にない要素を選択する方法はありますか? たとえば、以下の例では、class="bar"要素の内部にないclass="foo"(つまり、要素ではid="2"ないid="1") 要素を選択するにはどうすればよいですか?

<div class="foo">
  ... arbitrary depth ...
    <div class="bar" id="1">
      ...
    </div>
  ...
</div>
...
  <div class="bar" id="2">
    ...
  </div>
...

Answer 1

MDNによると:not()、いくつかの条件に従って要素に一致し、「非要素」は返されません。

すべての親を何らかの条件でテストする疑似セレクターを知らないので、個人的には次のような回避策を使用します。

div {background: yellow;}
.bar {background: green;}
.foo .bar {background: yellow;} /*repeat original styles changed by .bar*/

Answer 2

残念ながらそうではありません。これを機能させる唯一の方法は、:not 構文を使用し、要素またはクラス名で 1 層の深さを指定することです。

ここにフィドルがあります：http://jsfiddle.net/2V7Wc/

html

<div class="foo">
    <div class="bar" id="one">
    </div>
</div>
<div class="bar" id="two">
</div>

CSS:

.bar:not(#one) {
   /* styles */
}

Answer 3

私は以下を使用します：

.bar {
    color:red;
}

.foo ~ .bar{
    color:green;
}

このデモを参照してください: http://jsfiddle.net/QR3kP/