Nth Child for ul li links

Question

I am trying to get a special style for ul li a elements. Here is the code:

 <ul id="menu"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> 

I would like the second link (Two) to have a different style ( color ) than the other two (one and three).

This is what I tried, but it does not work:

#menu li a:nth-child(even) {color:red;}

Any work tips? There is a fiddle here:

http://jsfiddle.net/DSkfH/

Thanks!

Answer 1

:nth-child() selects elements from among its siblings, in this case a elements do not have siblings, so you need to use the class pseudo-class :nth-child() for li :

 #menu li:nth-child(even) a {color:red;} 

JS Fiddle demo .

Answer 2

Try

 #menu li:nth-child(even) a {color:red;} 

if you need color on whether you will also need

 #menu li:nth-child(even) {color:red;} 

You cannot use the li selector because the color property is not inherited by the a tag.

http://jsfiddle.net/DSkfH/3/