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>
...
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*/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With