Question

I have an .active class to apply to li a for the current page.

But it keeps being overrode by my styling the main nav div.

#nav ul li a:link, #nav ul li a:visited {
    color: #BBBBBB;
}

#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited {
    border-bottom: red solid 2px;
    padding-bottom: 4px;
    color: #fff;
}

I’ve tried a few variations on the second rule to try and dethrone the first, but none seem to work. (I didn’t have the id in originally, but I know that id is a step above class in the cascade). Maybe I’m missing something really basic, or maybe my first rule is foolishly over specific? (I always seem to be running into this sort of problem with links, specifically)

Answer 1

Assuming you have markup like this:

<div id="nav">
  <ul>
    <li><a href="#">foo</a></li>
    <li><a href="#">foo</a></li>
    <li class="active"><a href="#">foo</a></li>
  </ul>
</div>

Your CSS appears to work fine.

See http://jsfiddle.net/X7eAw/1/

You may need to add

#nav ul li.active a

to force specificity if the active class is not being applied. That selector is probably overkill however.

assuming you have the active class on your li element. If you are applying active to the anchor, then the rule should be: #nav ul li a.active:link