How to combine :first-child and :hover?

css, html

Solution

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.

Problem

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`?

Original source

Related problems