styling li

[bocochoco]

I've got a spritesheet that I made to use for tabs. The tabs right now are in a <ul> with the background set to one of the tabs. What I would like to do is be able to use pseudo-classes like :active, :hover, :link, etc. on the <li>'s. :hover works fine, but I cant get the image to change when the li is clicked on. I hope theres a way to do this without javascript, I'd rather save my js for more important things.

html:

<ul class="tabs">
<li class="tab">Home</li>
<li class="tab">About</li>
<li class="tab">Register</li>
<li class="tab">Login</li>
<li class="tab">Contact</li>
<li class="tab">Tab</li>
</ul>

css:

.tab
{
background: url(images/tabs.png) no-repeat top left;
height: 28px;
line-height: 28px;
text-align:center;
width: 74px;
}
.tab:active /* red */
{
background-position: 0 0;
} 
.tab:link /* green */
{
background-position: 0 -43px; 
} 
.tab:hover /* blue */
{ 
background-position: 0 -86px; 
} 
.tab /* white */
{ 
background-position: 0 -129px; 
} 
ul.tabs
{
bottom: -2px;
right:5px;
position: absolute;
}
ul.tabs li
{
color: #fff;
display: inline-block;
font-weight: bold;
height: 28px;
line-height: 28px;
margin: 0.15em 0.125em;
text-align: center;
width: 74px;
}

[abidshahzad4u]

Please follow this order for link effects and also add a in your css
LoVe HAte
.tab a:link { }
.tab a:visited { }
.tab a:hover { }
.tab a:active { }

[bocochoco]

LoVe HAte? Dunno what that means, but I moved the sprite into anchors nested in the li tags and it works perfectly now. Thanks

[swa66]

To be honest I don't know where the LoVe HAte mnemonic comes from, and I see it mentioned way too often without an explanation of why it is that that order is preferred by some.

L->link
V->visited
H->hover
A->active

The underlying reason for order is that all the selectors have the same specificity, so order is what makes one get to win if a conflict is in the properties (and only if they conflict).

To simplify, this html:
<a href="#">test</a>

the selector:
a { ... }
has a specificity of 0.0.1
(very low)
Yet anything you set on it will apply unless overridden by something with a bigger specificity or being later in the order of processing.

a:link { ... }
has a specificity of 0.1.1
(the pseudo class counts as a class)
We don't know up front if the browser will think the <a> is in the :link state or is in the :visited state. So it might apply or not.

Same goes for the other pseudo classes.

So in the end the order only matters what we want to win out on combinations e.g. a visited link being active, should the active win or the visited win ? The one you place last will win, for those properties you set that are contradicting, all other properties of both will get applied.

Similarly if you style the <a> with a "a { ... }" you don't need to repeat it all in all possible states, just override what you want to change.

Even more interesting become selectors like
a:visited:hover { ... }
which has a higher specificity of 0.2.1
and which means it'll win over the other no matter the order on a <a> that's been visited before and hovered over currently.

If this all confuses you: stick to LoVe HAte.
If you're ready to learn new stuff, I think it's time to do away with the mantra and learn more about specificity to start with and the move on to how to use it to do what we want done. And then we can move to new pseudo classes as we will find with CSS3 to play with.

only am <a> will have a :link and :visited state, :hover is supposed to be available on all elements (that's until you run into IE6, our usual underachiever)