CODEWITHSUNDEEP
csscss-selectors
Rokit
Rokit

Reputation: 1141

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

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?

Upvotes: 1

Views: 304

Answers (2)

Sushil
Sushil

Reputation: 1131

Hope this might help you

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

Upvotes: 0

Kobi
Kobi

Reputation: 138137

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

Upvotes: 1

Related Questions