css select everything, but ignore specific parent and all its children

Question

I need something like this:

html.select_everything :not(#ignore-me):not(#ignore-me *)

The above doesn't work because I can't use both the #ignore-me and the * in the same :not. Is there a plain css solution for this?

Answer 1

Not really.

An approach that will reliably work is to override the style:

.select_everything, .select_everything * {
   color:red; border:solid 1px silver;padding:2px;
}

.select_everything #ignore-me, .select_everything #ignore-me * {
  color:black;border:none;
}

<div class="select_everything">
  top level <div>under top level</div>
  <div id="ignore-me">not this <div>or this</div></div>
</div>

What you're trying to do is not supported. MDN - :not() says using , in :not in only supported in Safari:

The ability to list more than one selector is experimental and not yet widely supported.

Further, :not is not meant for nested selectors like a *, see nesting inside css :not() selectors

Answer 2

Hope this might help you

 .select_everything :not(#ignore-me,#ignore-me *) {
           //your css here
        }