CODEWITHSUNDEEP
htmlcss
Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

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?

Upvotes: 49

Views: 91476

Answers (4)

sk8work
sk8work

Reputation: 1

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>

Upvotes: 0

Hermas
Hermas

Reputation: 21

SOLVED Similar Question Answered

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

Upvotes: 2

Chetan S
Chetan S

Reputation: 23803

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

Here is a sample test case.

Upvotes: 12

stephenhay
stephenhay

Reputation: 2874

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.

Upvotes: 40

Related Questions