How do I add :hover on the nth child of an element using CSS2 selectors?

Question

I'm trying to give each menu li a unique background color on hover, and I want to do it using css2.

<ul>
    <li>
    <li>
    <li>
    <li>
</ul>

I was able to add a background onto the first element, using the following:

nav ul > li:hover:first-child a { background-color:red !important; }

When I add a different background onto the 2ndelement, the hover effect for the next element appears only when I place my cursor over the first element.

This is my code so far:

nav ul > li:hover:first-child a { background-color:red !important; }
nav ul > li:hover:first-child + li a { background-color:blue !important; }

Is there a proper way to do this with CSS2?

I'm tried to get some insight into this Boltclock's answer in the link below.

How do I get the nth child of an element using CSS2 selectors?

Any help would be greatly appreciated.

BoltClock · Accepted Answer · 2013-09-28T08:15:10.713

The nth child is represented by the last element in the + chain (before the combinator immediately following it, if any), so you would attach the :hover selector to that element like so:

nav ul > li:hover:first-child a { background-color:red !important; }
nav ul > li:first-child + li:hover a { background-color:blue !important; }

If you wish to make this clearer for the first child, you can reorder the pseudo-classes, placing :hover at the end (i.e. after :first-child):

nav ul > li:first-child:hover a { background-color:red !important; }
nav ul > li:first-child + li:hover a { background-color:blue !important; }

Lastly, as others have mentioned, you should remove the !importants unless you have a specific reason to use them.

1+ For not using `nth-child` – Josh Crozier Sep 28 '13 at 15:20 — Josh Crozier, Sep 28 '13 at 15:20

score 2 · Answer 2 · answered Sep 28 '13 at 08:05

The way @BoltClock describes is the only way to do it in CSS2 (as you requested) without defining classes (I personally would define classes for each list item as your solution since it's easier to maintain and easier to remember months from now how it works). If you can use CSS3, then nth-child is probably what you're looking for.

Your example code should look like this instead:

nav ul > li:hover:first-child a { background-color:red; }
nav ul > li:first-child + li:hover a { background-color:blue; }
nav ul > li:first-child + li + li:hover a { background-color:green; }
nav ul > li:first-child + li + li + li:hover a { background-color:yellow; }

score 1 · Answer 3 · edited Sep 28 '13 at 08:09

1

<ul>
  <li><a href="#">red</a></li>
  <li><a href="#">blue</a></li>
  <li><a href="#">green</a></li>
  <li><a href="#">yellow</a></li>
  <li><a href="#">magenta</a></li>
</ul>

li:first-child:hover a { background-color: red; }
li:nth-child(5):hover a { background-color: magenta; }

edited Sep 28 '13 at 08:09

BoltClock

700,868
160
1,392
1,356

answered Sep 28 '13 at 08:03

1

`:nth-child()` is not a CSS2 selector. – BoltClock Sep 28 '13 at 08:17

score 0 · Answer 4 · answered Sep 28 '13 at 07:46

In your html there are no <a> tags, yet the css rules are trying to style a link that is not there. Give this a shot:

<ul>
  <li><a href="#">test 1</a></li>
  <li><a href="#">test 2</a></li>
  <li><a href="#">test 3</a></li>
  <li><a href="#">test 4</a></li>
  <li><a href="#">test 5</a></li>
</ul>

li:first-child:hover a { background-color: red; }
li:nth-child(2):hover a { background-color: blue; }

Check this DEMO.

Also note that you don't need to use !important unless you need to override another style, and this can be problematic, albeit useful at times.

`:nth-child()` is not a CSS2 selector. – BoltClock Sep 28 '13 at 08:09 — BoltClock, Sep 28 '13 at 08:09

How do I add :hover on the nth child of an element using CSS2 selectors?

4 Answers4