CODEWITHSUNDEEP
jquerycss
Imesh Chandrasiri
Imesh Chandrasiri

Reputation: 5679

Dynamically added style doesn't work

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?

Upvotes: 1

Views: 108

Answers (3)

James Donnelly
James Donnelly

Reputation: 128791

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

Upvotes: 8

Arun P Johny
Arun P Johny

Reputation: 388316

It should be

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

The ; should be after !important

Upvotes: 1

Jaime Gris
Jaime Gris

Reputation: 1126

Isn't supposed to be:

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

Take note of the location of the semi-colon.

Upvotes: 1

Related Questions