Selecting elements that are not inside certain elements

Question

Using CSS3, is there a way to select elements that are not within elements with a certain class? For example, in the example below, how do I select class="bar" elements that are not inside elements of class="foo" (i.e., id="2" but not id="1")?

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

Answer 1

According to MDN, :not() will match an element according to some conditions, it won't return a "non-element".

I don't know any pseudoselectors to test all parents for some condition, so I would personally use a workaround like this:

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