Class not overwriting with addClass

Question

I'm using jQuery's addClass to add a class to an tab so when clicked it'll change the class so it's obvious the tab is highlighted.

My HTML

<div id="mainNav">
            <ul>
                <li id="LinktheBand" onclick="nav('theBand')">The Band</li>
                <li id="linkTheMusic" onclick="nav('theMusic')">The Music</li>

My CSS

#mainNav li {
    float:left;
    margin-right:5px;
    color:white;
    font-family:Tahoma;
    font-weight:bold;
    padding: 10px 8px 0px 8px;
    background:url('../images/transparent-65.png');
    height:40px;
    height: 25px !important;
    border:1px solid #000;
}

#mainNav li:hover {
    float:left;
    margin-right:5px;
    color:white;
    font-family:Tahoma;
    font-weight:bold;
    padding: 10px 8px 0px 8px;
    background: #660000;
    height:40px;
    height: 25px !important;
    border:1px solid #660000;
}

.mainNavSelected {
    float:left;
    margin-right:5px;
    color:white;
    font-family:Tahoma;
    font-weight:bold;
    padding: 10px 8px 0px 8px;
    background: #660000;
    height:40px;
    height: 25px !important;
    border:1px solid #660000;
}

My Javascript

function nav(a) {
$('#'+a).show();
$('#Link'+a).addClass('mainNavSelected');
}

This works properly, I check firebug and can see the class="mainNavSelected" is added, but the list element doesn't take any properties of the new class. Firebug lists all the class items for mainNavSelected, but has them all crossed out. What am i missing to replace the class of this element?

Answer 1

Firebug shows you where each CSS property comes from. If it comes from multiple places, the ones that are not in effect are crossed out.

I suspect that "#mainNav li" just has greater specificity than the class name. Try changing the selector for the class to "#mainNav li.mainNavSelected"

Answer 2

I believe the properties specified by ID take precedence over the properties specified by class, so you should change those specified by ID to be a class, then remove it and add teh new class.

Answer 3

I think it has something to do with the CSS cascade. Styles on an id will override styles on classes, even if they are stated afterwards. Try putting ul li a.mainNavSelected in the CSS and it should work.

Also notice that the id's case is inconsistent between the two links.

Answer 4

.mainNavSelected { 
    float:left; 
    margin-right:5px; 
    color:white; 
    font-family:Tahoma; 
    font-weight:bold; 
    padding: 10px 8px 0px 8px; 
    background: #660000 !important;
    height:40px; 
    height: 25px !important; 
    border:1px solid #660000 !important; 
} 

This should correct the problem. You see your CSS selector for #mainNav li is more specific than .mainNavSelected. Because of this #mainNav li will always show its style before .mainNavSelected.