CSS: not selector not working

Question

This is probably a really stupid question, but I can't get: not selector to work in css. I want to color all the text on my page if it does not have a class called "nocolor". Here is the code, I do not 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 should also look for an application for the parent elements (e.g. body and html tags).

You can fix this by adding body to the selector, for example:

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

Answer 2

Your selector should be written as follows:

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

Remove the '*' and it will select everything on the page.

See documents here: MDN

Answer 3

This is because * is applied to every element, including body , which does not have a .nocolor class.