jquery addclass styling doesn't work, wrong selector?

Question

<li id="leistungen"><a href="#Leistungen" onclick="sitemapChangeSubMenu('leistungen','leistungencontent','leistungen'); return false;">LEISTUNGEN</a> </li>

This is the list-item which I want to style with:

$("#leistungen a").addClass("brown");

This doesn't work for either:

$("#leistungen").addClass("brown");

my css code is just

.brown {
   color:brown;
}

I don't know what is wrong, hopefully you can help me :)

thanks a lot!

Answer 1

Case-sensitivity -- you named your anchor with an upper-case L.

$("#Leistungen").addClass("brown");

In the first case, also, you'd need to use a class selector, not an id selector

$(".leistungen a").addClass("brown");

Note -- I'd avoid classes and ids that match (with or without case sensitivity).

HTML ID Attribute docs (emphasis mine):

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). The value is case-sensitive.

Answer 2

You have firebug installed? In firebug you'll need to check whether the class is being added or not. If its being added, then refresh your browser cache, otherwise check your javascript.

Answer 3

Saying

$("#leistungen").addClass("brown");

will work on all text inside #leistungen, but not on anchor tags. Anchors have a default style that must be overridden. You are correct in writing

$("#leistungen a").addClass("brown");

Do a test to make sure your Javascript is executing by changing it to

$("#leistungen a").hide();

If it disappears, then you know that your Javascript is working on the correct element. Next, try being more specific with your selector (maybe something else is overriding your change).

$("li#leistungen a").addClass("brown");

If that doesn't work, make sure the javascript has executed and then inspect the element. Does it have the new class? If so, then the problem is with the CSS rather than the Javascript. Check your CSS file surrounding the ".brown" style to look for syntax errors. A missing } from the previous style would do it.

Try using "#4C3F12" instead of the word "brown" as a colour.

.brown {
  color: #4C3F12;
}

Let me know if any of these help!

Answer 4

You might have a problem with CSS specificity here. If the original color of your 'a' tag is specified very specific, the new definition might not work. For example:

body #leistungen a {
   color: red;
}

.brown {
   color: brown;
}

In this case the red color has precedence over the brown color, because the first definition is more specific than the last one. Try defining the brown class more specifically:

body #leistungen a.brown {
   color: brown;
}

Answer 5

It might be that you have a conflicting css definition somewhere. If you are certain that the javascript is being executed, then check this:

1. Since it is an ID, make sure that that ID is not assigned to another tag as well.
2. Do you have any other css declarations that applies on a tags?

Try changing the declaration to:

a.brown{ color: brown;}

Or .brown a {color: brown;}

Depending on if you use $("#leistungen a").addClass("brown"); or $("#leistungen").addClass("brown");