CSS html * except some class?

Question

I want to apply this to everything except a specific class and its children

html * {

 box-shadow: none !important;
 border: none !important;
 color: white;

     }

I tried this but not working

html *:not(.myclass *) {

 box-shadow: none !important;
 border: none !important;
 color: white;

     }

Answer 1

Not a direct answer to what you are asking, but is it not better to potentially have this:

html * {    
 box-shadow: none;
 border: none;
 color: white;
}

And then override it specifically in those classes where it is wanted, e.g.

.myclass {
    color:blue;
}

This is more how you might expect to find it. Note that I removed the 'important' declarations from the first * specifier as this makes things more difficult to potentially override in the future.

Answer 2

just add the :not(.myclass) selector between the body and the * and the selector :not again after the *:not(.myclass)

body :not(.myclass) *:not(.myclass) {
       box-shadow: none !important;
       border: none !important;
       color: red;
    }

<div>
  <h1>test 1</h1>
</div>

<div class="myclass">
  <h1 class="myclass">test 2</h1>
</div>

<div class="myclass">
  <h1>test 3</h1>
</div>

<div>
  <h1 class="myclass">test 4</h1>
</div>