CSS class not being used on list item with styling

Question

I have a list item thats styled based on the div container it's in. I want to add a "selected" class to that item, but it's not changing the styling. Firebug doesn't show it inhereting any styles from that css style.

You'll see I'm adding class="columnTabSelected" to the first tab, but that's not changing anything.

Here's a screenshot from Firebug to show that style isn't being added to the element. http://i49.tinypic.com/oszfqh.jpg

What am i missing?

My html

<div id="columnNewsTabs">
 <ul>
  <li id="recentHeadlinesLink" onclick="columnNews('recentHeadlines')" class="columnTabSelected">Recent</li>
  <li id="recentCommentstLink" onclick="columnNews('recentComments')">Comments</li>
  <li id="popularHeadlinesLink" onclick="columnNews('popularHeadlines')">Popular</li>
 </ul>
</div>

My CSS

#columnNewsTabs {
 overflow:auto;
}

#columnNewsTabs ul {
 list-style:none;
 margin:0px;
 padding-left:0px;
}

#columnNewsTabs li {
 float:left;
 margin-right:2px;
 font-family:Tahoma;
 font-weight:bold;
 padding: 5px;
 border:1px solid #ccc;
 border-bottom:none;
}



#columnNewsTabs li:hover {
 float:left;
 margin-right:2px;
 color:black;
 font-family:Tahoma;
 font-weight:bold;
 padding: 5px
 border:1px solid #ccc;
 border-bottom:none;
 background:#ccc;
}

#columnTabSelected {
 background: #CCCCCC !important;
}

Answer 1

Since you're defining a class and not an id, you need to use the class selector . instead of the id selector #:

#columnTabSelected {
 background: #CCCCCC !important;
}

Should be

.columnTabSelected {
 background: #CCCCCC !important;
}

Answer 2

You have it as class="columnTabSelected" but your CSS is written as #columnTabSelected. Change that last bit to .columnTabSelected as this represents Classes rather then IDs.