Adding css properties to jquery element has different result - class vs. css() method

Question

For my site, I'm saving the navigation menu's selected name in a cookie and after postback I read the cookie and then apply a background image to that selected menu item (using the same image I use for hovering).

I made a class for my "selected" menu items:

.selected
 {
color: Green;
height: 40px;
background: url(images/menu_hover.jpg) bottom no-repeat; 
 }

When I check for a cookie after postback I want to apply this class:

$("#" + $.cookie(cookieName)).addClass("selected");

It seems it only applies the background image, not the color or the height. In order to have the color and height work at all, I have to explicitly set those using the .css() method:

$("#" + $.cookie(cookieName)).css({ 'color': "green" });
$("#" + $.cookie(cookieName)).css({ 'height': "40px" });

Just curious if anyone has an idea as to why this occuring?

Answer 1

It sounds to me like a css specificity issue -- you may have color and height defined elsewhere with a more specific selector.

Answer 2

May it be that other CSS selectors match your element as well and they have higher priority?

You may find more info here: CSS: Understanding the selector's priority / specificity