Multiple classes inside :not()

CssCss Selectors

Css Problem Overview


I'm trying to use the :not() property to exclude a pair of classes from a rule, e.g.:

*:not(.class1, class2) { display: none; }

However, it looks like the not() property doesn't support comma separated classes, as show in this fiddle.

HTML:

<div class='one'>
  foo
</div>
<div class='two'>
  foo
</div>
<div class='three'>
  foo
</div>
<div class='four'>
  foo
</div>

CSS:

div {
  background-color: #CBA;
}

div:not(.one) {
  background-color: #ABC;
}

div:not(.one, .three) {
  color: #F00;
}

The first and second rules get applied, but the third doesn't.

I can't do *:not(.class1), *:not(.class2) because any element which has class2 will be selected by *:not(.class1) and vice versa.

I don't want to do

* { display: none;}
.class1, .class2 { display: inline; }

because not all .class1 and .class2 elements have the same original display property, and I want them to retain it.

How can I exclude multiple classes from a rule, either with the not() property or otherwise?

Css Solutions


Solution 1 - Css

You can use:

div:not(.one):not(.three) {
    color: #F00;
}

Fiddle

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionasfallowsView Question on Stackoverflow
Solution 1 - CssBeterrabaView Answer on Stackoverflow