How to combine :first-child and :hover?

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?

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.

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

Here is a sample test case.

SOLVED Similar Question Answered

.aston-menu-light>ul>li:last-child > a:hover {
    color:red !important;
} 

You can also use the following css code

#prodNavBar ul:last-child li:nth-child(2n-1):hover
#prodNavBar ul:last-child li:nth-child(2n):hover

I use this in my project

.buttons button:nth-child(2n) { background: white; border: 1px solid white; border-radius: 3px; box-shadow: 0 0 3px tomato; transition: box-shadow .2s ease-in-out; }
.buttons button:nth-child(2n):hover { box-shadow: 0 0 10px tomato; }
.buttons button:nth-child(2n):active { box-shadow: 0 0 10px tomato; border: 1px solid tomato; }

.buttons button:nth-child(2n-1) { background: white; border: 1px solid white; border-radius: 3px; box-shadow: 0 0 3px #39FF14; transition: box-shadow .2s ease-in-out; }
.buttons button:nth-child(2n-1):hover { box-shadow: 0 0 10px #39FF14; }
.buttons button:nth-child(2n-1):active { box-shadow: 0 0 10px #39FF14; border: 1px solid #39FF14; }

<div class="buttons">
<button type="submit">submit</button>
<button type="reset">reset</button>
</div>