Question

<style type="text/css">
#featured a:first-child
{
 background-color:yellow;
}
</style>

<div id="featured">
   <ul class="ui-tabs-nav">
     <li><a href="#"><span>test 1</span></a></li>
     <li><a href="#"><span>test 2</span></a></li>
     <li><a href="#"><span>test 3</span></a></li>
     <li><a href="#"><span>test 4</span></a></li>
   </ul>
</div>

I wanted to highlight first anchor from the list, but unfortunately all anchors are highlighted. What is the mistake do here.

Answer 1

They are all highlighted because each a is the first-child of its parent li

What you probably want is something like:

#featured li:first-child a
{
 background-color:yellow;
}