Linkbar troubles

can't get the one tab to be a different color

[Phantom]

I'm trying to make a linkbar out of an unorderd list, with one the items having a different background and hover backgournd color (for the currently selected item.) However, it keeps getting overridden by the normal backgorund color. Any suggestions?

Here's my code.

#navlist {
padding-left: 0;
margin-left: 0;
background-color: tan;
color: black;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}

#navlist li {
display: inline;
}

#navlist li a {
text-decoration: none;
border-right: 1px solid black;
padding: 0.5em 1em;
font-weight: bold;
background-color: tan;
color: black;
float: left;
}

#navlist li a:hover {
background-color: white;
}

#current a {
background-color: #B2946C;
}

#current a:hover {
background-color: #92744C;
}

and the HTML

<div id="linkbar">
<ul id="navlist">
<li id="current"><a href="#">Home</a></li>
<li><a href="one.html">One</a></li>
<li><a href="two.html">Two</a></li>
<li><a href="three.html">Three</a></li>
</ul>
</div>

(alot of this is based on [css.maxdesign.com.au...] which doens't show you how to have the one list item singled out)

[Ingolemo]

Try making the selectors more specific.

#navlist li#current a {}
#navlist li#current a:hover {}

[mep00]

Specificity does look like the issue, however I believe another option would be a little cleaner and simpler.

You have:

#navlist li a {}

However, as

#navlist

is a

<ul>

, the

li

is redundant and only serves to make the selector more specific (102 instead of 101). By simply dropping the

li

both will be 101, and therefor the cascade will cause which ever is latter to take precedence.

Btw,

li#current

and

#current

are equally specific. In general, there are only two reasons to choose the more verbose option. The first is that the same ID is used for different types of element across different pages (rare, but possible). The second is that you just want to be verbose. In terms of specificity, the same would hold true for classes; except with classes, where two different types of element can share the same class, being able to properly target the selector is also important. (It doesn't matter that you hit a target closer to the bullseye if you're aiming at the wrong target.)