Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Selecting elements that are not inside certain elements

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>
...
like image 834
sawa Avatar asked Apr 12 '13 14:04

sawa


1 Answers

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*/
like image 94
Aprillion Avatar answered Nov 16 '22 05:11

Aprillion