css :not() selector not working with universal selector (*)

Question

Haii

Looks like the css selector :not() doesn't work well with the * selector.

Any way around it? Or am I doing something wrong?

*:not(.nope){
  color: green;
}

<div>hai</div>
<div>I</div>
<div class="nope">am</div>
<div>Jhon</div>

I still get 'am' as green.

Thanks in advance!

Answer 1

The universal selector (*) is not the problem. It's the inheritance on the color property.

When you say...

*:note(.nope)

that's fine, but you're forgetting that * applies the color to the body and html elements, as well.

So .nope gets the green from its parent.

If you use a property that is not inherited (like border) you won't have this problem.

*:not(.nope){
  border: 1px solid red;
}

* {
  margin: 5px;
}

<div>hai</div>
<div>I</div>
<div class="nope">am</div>
<div>Jhon</div>

Notice how .nope doesn't get the border.

For the color to work as you want, be more specific.

div:not(.nope) {
  color: green;
}

<div>hai</div>
<div>I</div>
<div class="nope">am</div>
<div>Jhon</div>