How to ignore css class

Question

Can a css value be ignored ?

I have two divs :

<div id="div1" class="class1 class2">
</div>

<div id="div2" class="class1">
</div>

Can the css class be applied to just divs which are styled with class1 and if they contain class2 then its ignored ? So in above divs just div2 is styled with class1 because div1 is also styled with class2.

Answer 1

You can use the :not selector. Here's an example:

CSS

.red:not(.yellow) {
    color: red;
}
.yellow {
    background-color: yellow;
}

HTML:

<div class = "red yellow">
   Glee's awesome!
</div>
<div class = "red">
   Glee's awesome!
</div>

Demo.

I hope that helped!

Answer 2

Write like this:

.class1{
  background:red;
}
.class1.class2{
  background:none;
}

Answer 3

You can use :not selector:

$('.class1:not(.class2)')

Answer 4

YESSSS,

use !important after the css property

for example height:30px !important

if your class1 have height:30px and class2 height:40px then user !important in class2 height