CSS :not selector doesn't work

Question

This is probably a really stupid question, but I can't get the :not selector to work in css. I want to color all text in my page unless it has a class called "nocolor". Here's the code, I don't see the problem:

*:not(.nocolor) {
    color: #f00;
}

<h2>Hello</h2>
<h2 class="nocolor">Hello</h2>

Answer 1

I was surprised by this behavior but the * selector applies to everything so you have to look out for application to parent elements as well (like body and html tags themselves).

You can fix it by adding body to the selector, like so:

body *:not(.nocolor) {
   color: red;
}