如何忽略css类

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

你可以使用: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

Answer 5

The way I would handle this with jquery ( since its how you tagged it and if you only ever want the div with just class class1) is to do a check such as

if($('div').class() == 'class1') {


}

This will select only the div where class equals class1 and not the one with class of class1 class2

Answer 6

Great answers here and I just want to add here a little bit: You've to decide here between selectors that seem to do the same but are a little different:

• "Override class1 styles when class2 is present." or "I want special styles when both classes are present."
• "Apply special styles when class1 is present and class2 is not."
• "I really want to suppress all rules of class1 selectors when class2 is present."

You've to decide what exactly your requirements are. There is a difference between these sentences.

In the first case go with CSS selectors like @sandeep posted, because these selectors work like this. The .class1.class2 selector is more specific than .class1 selector and it is choosen over it when both classes are present. So you can set there the rules you want to be applied only if both classes are present. Collidating rules in the more specific selector have higher priority than in then other and are able to override it.

In the second case go with the :not selectors. These make it possible to apply certain styles only when a class is present and some other is not.

For the third case: Your question is pointing at ignoring a css class. This is not possible. You can override its rules in a more specific selector or put its rules in a selector not matching certain tags anymore. But you cannot ignore it as long as its there. Therefore you've to remove the class1 from the class attribute of the tag. You can achieve this with jQuery though.

 $(".class2").removeClass("class1");