Несколько классов внутри: not()

Я пытаюсь использовать свойство :not(), чтобы исключить пару классов из правила, например:

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

Однако, похоже, что свойство not() не поддерживает классы, разделенные запятыми, как показано в этой скрипке.

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;
}

Первое и второе правила применяются, но третье не делает.

Я не могу сделать *:not(.class1), *:not(.class2), потому что любой элемент, который имеет class2, будет выбран *:not(.class1) и наоборот.

Я не хочу делать

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

потому что не все элементы .class1 и .class2 имеют одинаковое исходное свойство отображения, и я хочу, чтобы они сохранили его.

Как я могу исключить несколько классов из правила, либо с помощью свойства not(), либо иначе?

Ответ 1

Вы можете использовать:

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

Fiddle