How to combine :first-child and :hover?

Question

I have an unordered list I'm using for a menu. Each item has a background image and a :hover image. The background image on the first element is different that the rest, so I use the following to style it, which works fine:

#prodNavBar ul:last-child li:first-child {...} 

Since I want a roll-over image on this element as well, I've tried adding :hover, like so:

#prodNavBar ul:last-child li:first-child:hover {...} 

...but this doesn't work. What's the syntax to combine :first-child and :hover?

Answer 1

Chaining :first-child and :hover as you do here should work just fine. If you're using IE6, however, only the last pseudo-class in the chain will be recognized.

In other words, you're doing it right.

Answer 2

li:first-child:hover should work. Which browser are you testing with? IE doesn't support last-child

Here is a sample test case.