Как скомбинировать: first-child и: hover?

У меня есть неупорядоченный список, который я использую для меню. Каждый элемент имеет фоновое изображение и изображение: hover. Фоновое изображение на первом элементе отличается от остальных, поэтому я использую следующее для его стилизации, которое отлично работает:

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

Так как я хочу перевернутое изображение на этом элементе, я попытался добавить :hover, например:

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

... но это не работает. Каков синтаксис для объединения :first-child и :hover?

Ответ 1

Цепочка :first-child и :hover, как вы здесь, должна работать нормально. Однако, если вы используете IE6, будет распознан только последний псевдокласс в цепочке.

Другими словами, вы делаете это правильно.

Ответ 2

li:first-child:hover должен работать. С каким браузером вы тестируете? IE не поддерживает last-child

Здесь - пример тестового примера.