Как совместить: первый ребенок и: hover?

Question

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

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

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

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

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

Answer 1

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

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

Answer 2

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

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