Plusieurs classes à l'intérieur: not ()

Question

J'essaie d'utiliser la propriété :not() pour exclure une paire de classes d'une règle, par exemple:

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

Cependant, il semble que la propriété not() ne supporte pas les classes séparées par des virgules, comme le montre ce violon .

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

Les première et deuxième règles sont appliquées, mais pas la troisième.

Je ne peux pas faire *:not(.class1), *:not(.class2) car tout élément comportant class2 Sera sélectionné par *:not(.class1) et vice versa.

Je ne veux pas faire

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

car tous les éléments .class1 et .class2 n'ont pas la même propriété d'affichage d'origine et je veux qu'ils la conservent.

Comment puis-je exclure plusieurs classes d'une règle, avec la propriété not() ou autrement?

Answer 1

Vous pouvez utiliser:

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

violon