css: link color in UL class does not override default color for div

Question

I have defined a div with the following:

#main-alt-2 a:link {color:#39c;}
#main-alt-2 a:visited {color:#39c;}

For a UL within this div I have defined this:

ul.menu a:link {
font-weight:bold;
display:block;
text-decoration:none;   
color:#323232;
}

All other properties within the ul.menu class work - except the color. Very strange!

Hope someone can help!

Solution 1

If multiple CSS definitions pertain to the same HTML element, the specificity of the selectors is compared. To make rules with lower specificity take precedence, add !important:

ul.menu a:link {color: #323232 !important;}

Alternatively, you can make the second selector more specific.

Solution 2

Because of css specificity, you will need to do it this way:

#main-alt-2 ul.menu a:link {
font-weight:bold;
display:block;
text-decoration:none;   
color:#323232;
}

Comments

[okdan]

hmmm, the the UL is being used within a jquery menu which looks for classes, not id's, is there a way to make a class more specific? Or do i have to change everything to an ID?

[okdan]

Ok, thank you very much - all answers helped me clear out things, but the !important was the easiest solution ;o)