How to combine :first-child and :hover? - html

Question

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?

Answer 1

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.

Answer 2

li:first-child:hover should work. Which browser are you testing with? IE doesn't support last-child
Here is a sample test case.

Answer 3

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

Answer 4

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>