CODEWITHSUNDEEP
csscss-selectors
dllhell
dllhell

Reputation: 2014

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

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?

Upvotes: 4

Views: 3127

Answers (2)

arkascha
arkascha

Reputation: 42984

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)

  1. 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...

Upvotes: 4

Akshay
Akshay

Reputation: 14378

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>

Upvotes: 2

Related Questions