CODEWITHSUNDEEP
jquerycss
Karem
Karem

Reputation: 18123

ToggleClass not working properly

Why does my toggleclass not work?

http://jsfiddle.net/xH8ME/1/

(The toggleclass() doesnt work, but it should work)

Upvotes: 0

Views: 561

Answers (5)

Mark Schultheiss
Mark Schultheiss

Reputation: 34227

Place the desired override last. Also, you can apply !important to the style but to ensure that if another is given !important, the sequence will still weigh higher. Your fiddle page also had an extra } at the end.

.userGridViewItem{
    background: brown;
    color: #fff;
    width: 200px;
    height: 100px;
}
.warningYellow{
    border: 3px solid yellow;
}
.warnings_receiver_highlight{
    background: #000 !important;
    color: #000 !important;
}

Upvotes: 0

Jack
Jack

Reputation: 8941

If I'm understanding what you want, all you should have to do is place the styles in your css for warnings_receiver_highlight after your styles for userGridViewItem.

Upvotes: 1

John Hartsock
John Hartsock

Reputation: 86902

The toggle class is working fine it is your CSS that is messed up I have a corrected fiddle here http://jsfiddle.net/xH8ME/2/

Basically you have the two classes defined below. Since your divs have both classes how does the browser know which background should be applied? Because .userGridViewItem is defined first in the element that is the class that it pulls the background color from. To make this work properly you need to use the !important at the end of the attribute or make your CSS classes more specific like div.warnings_receiver_highlight or .userGridViewItem.warnings_receiver_highlight

.warnings_receiver_highlight{
    background: #000;
    color: #000;
}
.userGridViewItem{
    background: brown;
    color: #fff;
    width: 200px;
    height: 100px;
}

Upvotes: 0

GoGoGarrett
GoGoGarrett

Reputation: 623

I believe your code is working correctly, you just seem to be having an issue with CSS specificity (http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/). One solution would be to add !important to the attributes under .warnings_receiver_highlight

Upvotes: 0

Mrchief
Mrchief

Reputation: 76268

It's working but the styles are getting overriden.

Try with this:

.warnings_receiver_highlight {
    background: #000 !important;
    color: #000  !important;
}

Demo: http://jsfiddle.net/xH8ME/3/

Upvotes: 1

Related Questions