CODEWITHSUNDEEP
jquerycss
blue-sky
blue-sky

Reputation: 53806

How to ignore css class

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.

Upvotes: 6

Views: 23642

Answers (6)

Chris
Chris

Reputation: 26878

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!

Upvotes: 14

Fabian Barney
Fabian Barney

Reputation: 14549

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");

Upvotes: 0

Ram
Ram

Reputation: 144689

You can use :not selector:

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

Upvotes: 2

bretterer
bretterer

Reputation: 5781

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

Upvotes: 0

supersaiyan
supersaiyan

Reputation: 1730

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

Upvotes: 1

sandeep
sandeep

Reputation: 92803

Write like this:

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

Upvotes: 8

Related Questions