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?

probably you have another class which is over writing them, a link example would be great — Treemonkey, May 26 '11 at 13:59
and why you want to do this sort of thing with cookies is beyone me :P — Treemonkey, May 26 '11 at 14:00
its difficult to suggest a usefull idea, unless you can provide information about your website or cms and coding language — Treemonkey, May 26 '11 at 14:07

score 5 · Accepted Answer · answered May 26 '11 at 14:00

5

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

answered May 26 '11 at 14:00

newtron

5,938
1
23
19

*bangs head on desk* -- so simple but exactly what it was... I had a specific selector for the anchor tag with a different height defined. Thanks! – proggrock May 26 '11 at 14:10

score 2 · Answer 2 · edited May 23 '17 at 12:12

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

edited May 23 '17 at 12:12

Community

1
1

answered May 26 '11 at 14:03

Vilmantas Baranauskas

6,596
3
38
50

Thanks Vilmantas, that link points out what I need to understand – proggrock May 26 '11 at 14:08

score 1 · Answer 3 · answered May 26 '11 at 14:07

1

Use something like the Web Developer toolbar or DOM Inspector in Firefox to work out what's actually affecting your styles.

answered May 26 '11 at 14:07

Emyr

2,351
18
38

score 1 · Answer 4 · answered May 26 '11 at 14:12

It sound like you want to use a class on a specific link when your on that page, so you could have a class on the body, like so:

<body class="home">

And in your CSS:

.home a.homeLink:link{
...
}

Wouldn't need JS at all then.

Done an example here:

http://jsfiddle.net/NbVVr/

Not sure if this is what you want?

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

4 Answers4