CSS navigation

HTML & CSS
1

Driving me nuts. Why isn’t “Item one” being colored red, as it has the “current” style applied to it?

<style type="text/css">

ul#navlist{
	margin-left: 0;
	padding-left: 0;
	white-space: nowrap;
}

#navlist li{
	display: inline;
	list-style-type: none;
}

#navlist a { 
	padding: 3px 10px; 
	text-decoration: none;
}

#navlist a:link, #navlist a:visited{
	color: #fff;
	background-color: #036;
}

#navlist a:hover {
	color: #fff;
	background-color: #369;
}

.current {
	color: #fff;	
	background-color: #FF0000;
}
</style>


<div id="navcontainer">
	<ul id="navlist">
		<li><a href="#" id="cs1" class="current">Item one</a></li>
		<li><a href="#" id="cs2">Item two</a></li>
		<li><a href="#" id="cs3">Item three</a></li>
	</ul>
</div>

I need to keep the id’s on the <a href> tags so i can preform s javascript action on click, and I want to have the class tag in “Item one” control the color so i can use javascript to add/remove classes as the page changes.

Why isn’t Item one shown with a red background color? :eye:

2

dang it! i was close i did try #navlist .current… so close

thank you! :smiley:

3

Specificity :slight_smile:


[B]#navlist a[/B].current {
    color: #fff;   
    background-color: #FF0000;
}

IDs carry more “weight” and will always win out over a plain class so you have to add more weight to the rule until the rule you want to win out is more specific.

Read the link above for an in-depth explanation :slight_smile: