How to combine: first-child and: hover?

Question

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

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

Since I want an inverted image on this element, I tried to add :hover , for example:

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

... but it does not work. What is the syntax for combining :first-child and :hover ?

Answer 1

The :first-child and :hover chain, as you are here, should work fine. However, if you use IE6, only the last pseudo-class in the chain will be recognized.

In other words, you are doing it right.

Answer 2

li:first-child:hover should work. What browser are you testing with? IE does not support last-child

Here is an example of a test case.