How to combine :first-child and :hover?

HtmlCss

Html Problem Overview

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?

Html Solutions

Solution 1 - Html

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.

Solution 2 - Html

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

Here is a sample test case.

Solution 3 - Html

SOLVED [Similar Question Answered](https://stackoverflow.com/questions/53433146/css-last-child-and-hover-on-an-a-link-in-a-ul/53433241 "CSS :last-child AND :hover on an a link in a ul")

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

Previous Solution:

Is there a Java equivalent of Python's defaultdict?

JavaPythonHashmap

Next Solution:

How can I make the map::find operation case insensitive?

C++StringDictionaryStlCase Insensitive

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDiodeus - James MacFarlaneView Question on Stackoverflow
Solution 1 - HtmlstephenhayView Answer on Stackoverflow
Solution 2 - HtmlChetan SView Answer on Stackoverflow
Solution 3 - HtmlHermasView Answer on Stackoverflow