Rollover list with the first child already activated?

Question

Sorry for my poor english, I'm french !

The first li is already in red, but I want classical rollover effect (only css)

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
</ul>

with

li:first-child { color: red; }
li:hover { color: red; }
ul:hover li:first-child { color: black; }
li:first-child:hover { color: red; }

The last line doesn't work : When my mouse is over 1111, he becomes black instead of stay red.

Look here please : http://jsfiddle.net/cP5rQ/3/

And thank you for advance.

Answer 1

You need to increase the specificity of your last rule enough so that it becomes at least equal to the specificity of the third rule; it will then override the third rule and the item will become red as it should.

Do this by writing the last rule as

ul:hover li:first-child:hover { color: red; }​

See it in action.

Answer 2

This does the trick. Is this what you wanted?

li:first-child { color: red; }
ul:hover li:first-child { color: black; }
li:hover { color: red; }
ul:hover li:first-child:hover { color: red; }​

http://jsfiddle.net/cP5rQ/6/