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
– Treemonkey, Commented May 26, 2011 at 13:59
and why you want to do this sort of thing with cookies is beyone me :P — Treemonkey
– Treemonkey, Commented May 26, 2011 at 14:00
its difficult to suggest a usefull idea, unless you can provide information about your website or cms and coding language — Treemonkey
– Treemonkey, Commented May 26, 2011 at 14:07

newtron · Accepted Answer · 2011-05-26 14:00:05Z

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, 2011 at 14:00

newtron

6,1341 gold badge26 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

proggrock Over a year ago

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!

Community · Accepted Answer · 2017-05-23 12:12:03Z

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, 2017 at 12:12

CommunityBot

11 silver badge

answered May 26, 2011 at 14:03

Vilmantas Baranauskas

6,7343 gold badges42 silver badges52 bronze badges

1 Comment

proggrock Over a year ago

Thanks Vilmantas, that link points out what I need to understand

Emyr · Accepted Answer · 2011-05-26 14:07:48Z

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, 2011 at 14:07

Emyr

2,38118 silver badges39 bronze badges

Comments

Tomgrohl · Accepted Answer · 2011-05-26 14:12:55Z

1

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?

answered May 26, 2011 at 14:12

Tomgrohl

1,75710 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related