CSS class not being used on list item with styling - css

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.