classi multiple all'interno: non()

Question

Sto cercando di utilizzare la proprietà :not() di escludere un paio di classi da una regola, ad esempio:

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

Tuttavia, sembra che la proprietà not() non supporta classi separate da virgola, come mostrato 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; 
} 

Il primo e secondo regole vengono applicate, ma il terzo non lo fa.

non posso fare *:not(.class1), *:not(.class2) perché ogni elemento che deve class2 sarà selezionato da *:not(.class1) e viceversa.

Non voglio fare

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

perché non tutti i .class1 e .class2 elementi hanno la stessa proprietà di visualizzazione originale, e voglio loro di conservarlo.

Come posso escludere più classi da una regola, con la proprietà not() o altro?

Answer 1

È possibile utilizzare:

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

Fiddle