Sameera Thilakasiri Sameera Thilakasiri - 3 months ago 11
HTML Question

css3 first-child in anchor of list items

<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

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;
}
Comments