Multiple classes inside :not()

Question

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?

as you noticed , coma is not yet properly implemented , so do it this way: `*:not(.class1):not(.class2)` and so on — G-Cyrillus, Jun 17 '14 at 14:36

score 215 · Accepted Answer · answered Jun 17 '14 at 14:35

215

You can use:

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

answered Jun 17 '14 at 14:35

Beterraba

2

I tried that for my project but it makes the rule too specific and it overrides most of my other rules. – micheal65536 Oct 24 '15 at 12:11
5

how about `not(.one, .three)`? seems to work for me – Diansheng Mar 28 '17 at 08:57
2

@Sean - Are you using jQuery instead of plain CSS? https://stackoverflow.com/questions/10711730/why-is-my-jquery-not-selector-not-working-in-css – Sphinxxx Aug 23 '17 at 11:59
@Sphinxxx I cannot remember it exactly. but a simple test should be able to verify it. Thanks for pointing out the difference between jquery and css on selector. It is useful for whoever reads it. – Diansheng Aug 24 '17 at 07:00
@Diansheng not(.one, .three) seem not to work in firefox and chrome, but somehow it is documented here https://developer.mozilla.org/en-US/docs/Web/CSS/:not – yonexbat Aug 10 '19 at 09:11
1

According to the page provided by @yonexbat, i came to realize two things. 1. `not(.one, .three) is not well supported 2. the two expression are not equivalent, one is not(a or b), the other is (not a)&(not b) – Diansheng Aug 13 '19 at 06:49

1 Answers1