Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Dynamically added style doesn't work

Dynamically added style doesn't work

Problem

I've got an element class with the following CSS:

#item-group-navigation li a{
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-family: MyriadProReg;
    vertical-align: -1px;
}

And I add the following class using jQuery after a certain event:

.item-group-selected{
    color:rgb(245, 255, 0);!important
}

But the problem is that the dynamically added Style doesn't work. The default style is applied instead. I tried to use the !important keyword but it doesn't work. Can anyone explain what I'm doing wrong?

Problem courtesy of: Imesh Chandrasiri

Solution

If you use !important it needs to be placed before the semicolon.

color:rgb(245, 255, 0) !important;

You shouldn't need to use that though. Ensure that your class is added after any other styles which may override that Color and inspect your page to see where the current color is being computed from.

For instance, if your CSS looks like this:

.item-group-selected{
    color:rgb(245, 255, 0);
}

#item-group-navigation li a {
    color: white;
}

You should move the .item-group-selected option below the #item-group-navigation and/or give it higher specificity:

#item-group-navigation li a {
    color: white;
}

#item-group-navigation li.item-group-selected a {
    color:rgb(245, 255, 0);
}
Solution courtesy of: James Donnelly

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Dynamically added style doesn't work

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×