Pseudo class problem

Is there any reason why this code isn't selecting my first <li> element? Note: the default font color is gray.

<div id="bottom-nav">
<ul>
<li><a href="#" title="T-Shirts">T-Shirts</a></li>
<li><a href="#" title="Contact">Contact</a></li>
<li><a href="#" title="Sevices">Services</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Work">Work</a></li>
<li><a href="#" title="Latest">Latest</a></li>
</ul>

</div>

#bottom-nav ul li:first-child {
color: #000;
}

#bottom-nav ul li:first-child > a {color: #000;}

#bottom-nav ul li:first-child > a {color: #000;}

Genius! I see what I did, just need to go one more level. Thanks.

It also worked by doing "li:first-child a".