CODEWITHSUNDEEP
csscss-selectors
HelloWorld
HelloWorld

Reputation: 181

Nth Child for ul li a links

I am trying to get a special styling for ul li a elements. Here's 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'd like the second link (Two) to have a different styling (color) than the other two (One and Three).

This is what I've been trying, but it does not seem to work:

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

Any tips for getting this to work? Here is a fiddle all set up:

http://jsfiddle.net/DSkfH/

Upvotes: 5

Views: 22475

Answers (2)

Musa
Musa

Reputation: 97672

Try

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

if you want the color on the li as well you'll need also

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

You cant just have the li selector because the colour property is not inherited by the a tag.

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

Upvotes: 4

David Thomas
David Thomas

Reputation: 253308

:nth-child() selects elements from amongst their siblings, in this case the a elements have no siblings, so you'll need to employ the :nth-child() pseudo-class to the li instead:

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

JS Fiddle demo.

Upvotes: 15

Related Questions