CODEWITHSUNDEEP
htmlcsscss-selectors
nanobar
nanobar

Reputation: 66355

CSS selector based on ancestors not having a class

I would like to style a class based on another class not existing in the ancestors.

div:not(.evil-class) .element {
  background-color: green;
}
<div class="evil-class">
  <div class="element">An element within the evil class</div>
</div>

<div class="element">An element NOT in the evil class</div>

Not sure why that doesn't work?

I'm aware I can do the inverse; apply a style to both elements and then overwrite that style, but I'd rather not do that as I'd be overwriting styling which could change in a third party lib.

Thanks.

css-applied-despite-rule

Upvotes: 3

Views: 2722

Answers (1)

Quentin
Quentin

Reputation: 943561

div:not(.evil-class) .element means "Something with the class element that is descended from a div which does not have the class evil-class"

Your element is not descended from any div, so div:not(.evil-class) doesn't match any of the ancestors (which are only <body> and <html> in this case).

There is currently no way to express "None of the ancestors have a specific class" in CSS.

Selectors Level 4 proposes allowing :not() to contain complex selectors so in the future you may be able to do something like:

.element:not(div.evil-class *) {
  background-color: green;
}
<div class="evil-class">
  <div class="element">An element within the evil class</div>
</div>

<div class="element">An element NOT in the evil class</div>

Browser support is currently almost non-existent, but the demo above works in current versions of Safari.

Upvotes: 12

Related Questions