CODEWITHSUNDEEP
htmlcsscss-selectors
Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9508

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.

Upvotes: 3

Views: 5686

Answers (3)

danwellman
danwellman

Reputation: 9253

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

Upvotes: 7

Fabian Barney
Fabian Barney

Reputation: 14549

If you always have a list I would prefer the CSS solution like @powerbuoy and @danwellman posted. If you just want to format the first anchor tag nested inside an arbitrary tag (with id featured) with arbitrary nesting-level then I would prefer jQuery:

$('#featured a').first().css('background-color', 'yellow');

Example with div's rather than an unordered list: http://jsfiddle.net/9vAZJ/
Same jQuery code formatting a list (like in the question): http://jsfiddle.net/9vAZJ/1/

The jQuery code is a more general solution and fits better to your initial try to format the anchor tag in your question since both solutions are decoupled from list tags.

Nevertheless when list-styling is your only task here then I would recommend the CSS solution.

Upvotes: 1

powerbuoy
powerbuoy

Reputation: 12838

Because all anchors are the first child of their parents. You need to:

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

Upvotes: 2

Related Questions