jQuery - select nth child within <li>

Question

hi, i'm trying to select the <a> within the <span> that's the nth child of the <li>

HTML

<li>
 <span><a></a></span>
 <span><a></a></span>
 ......
 <span><a></a></span>
</li>

jQuery

$(function(){
 if ($('body').attr('class') == 'special') {
  $('li span:nth-child(1) a').css({'color' : '#444444'});
 };
});

what am i missing here because it doesn't seem to select the <a>

thanks

Answer 1

Your code works, you can test it here, make sure of a few things:

What your code is running in a document.ready handler, like this:

$(function() {
  $('li span:nth-child(1) a').css({'color' : '#444444'});
});

And that your anchors have an href or a name attribute, otherwise the browser may render them as disabled, ignoring some styling.