How to put more than one class in css not() selector?

Question

I would like to stack more than one class in not() selector but ,;: does not work.

input[type=text]:hover:not(.ui-pg-input .mandatory){ background-color: #D9EDF7;}

So, what is proper way to stack classes in css not() selector?

Answer 1

Two syntactic alternatives:

1. use two classes in one :not operator:

input[type=text]:hover:not(.ui-pg-input.mandatory){background-color: #D9EDF7;}

(note the removed blank between the classes)

2. use the :not operator twice:

input[type=text]:hover:not(.ui-pg-input):not(.mandatory){background-color: #D9EDF7;}

Note however that both have different meaning: the first uses an or operator, so it matches all elements not having both classes (so having none or one), whilst the second uses an and operator, thus matching all elements not having one or the other class (so having none). So it depends on what you want to do...

Answer 2

You can use twonot() to do this example:

p:not(.class_one):not(.class_two){

p:not(.one):not(.two){
  color:red;
  }

<p class="one">Text</p>
<p class="two">Text</p>
<p class="three">Text</p>