CSS Problem with :first-child need help

hi

I am designing a website and I have a horizontal menu like this
#navigation ul li a{
}

I want to made the first anchor link to be different color, the only way I can see is by using :first-child property. however everything I use this all the anchor links change color :S

#navigation ul li a:first-child{
}

need help

 

You're not interested in the first child of the list-item, you want the first-child of the list.

#navigation ul li:first-child a {
  ...
  }

Code (markup):

cheers,

gary

 

tks gary for reply.
I tried what you suggested still not working.... :S

 

Why dont use another class just for the first item of li ?

This is not a good idea, but the first solution I was thinking, and the last action I will do if no other solution..

 

Show me. Show me the html markup for the list and the exact css ruleset.

 

What Gary is trying to politely imply is that CSS without the markup it's applied to is gibberish; it's why snippets are pointless trash when trying to diagnose a problem.

 

My mistake, its not the first list but the second list and the code is as follows:
I want the "order now" link to be different color

<div id="navigation">

<ul>
<li><div class="fb-like"</div></li>
<li><a href="h">order now</a></li>
<li><a href="#">linke3</a></li>
<li><a href="#">linke4</a></li>
<li><a href="#">linke5</a></li>
<li><a href="#">linke6</a></li>
<li><a href="#">linke7/a></li>
</ul>


CSS as folows:


#navigation {
margin-top: 10px;
text-align:right;
}
#navigation ul {
padding:0px;
margin:0px;
}
#navigation ul li {
display:inline;
}
#navigation ul li a, #navigation ul li a:link, #navigation ul li a:active, #navigation ul li a:visited {
color:#FFF;
text-decoration:none;
padding-right: 15px;
padding-left: 15px;
text-transform: capitalize;
background-color: #ce2b4e;
padding-top: 5px;
padding-bottom: 5px;
border: thin dashed #ce2b4e;
}
#navigation ul li a:hover {
color:#ce2b4e;
text-decoration:underline;
background-color: #EFEFEF;
}

 

Then you want li:nth-child(2), not first-child. As before you can only child off the UL, since A would be the children of the LI, not the UL (so all of them are first-child) -- your first LI is the fb like link (which doesn't seem to be part of the on-site navigation so why the *** is it even in the list?) so that's not what you want to target.

Honestly, I'd either get that div out of the list since it's not semantically part of it, or man up and just use one class to target it.

That said --- and what I'm about to say I'm seeing WAY to ****ing often -- what the blue blazes do you have that extra DIV around the UL for?!? Serves no legitimate purpose as you aren't doing a blasted thing that couldn't be done directly to the UL!

of course that's without mentioning the bizarro uncombined padding declarations, psuedo-states for nothing, incomplete 'hover' stack, etc, etc, etc...

 

I have coded this way and now I dont want to back to the code and delete/alter all the files.

can you just tell me the code for the li:nth-child(2) please

 

It's exactly as I showed you earlier, except that you use :nth-child(2) instead of :first-child.

See §6.6.5. Structural pseudo-classes of the current recommendation.