Css3 first-child in list item binding
<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 the first anchor from the list, but unfortunately all anchors are selected. What a mistake here.
source to share
If you always have a list, I would prefer a CSS solution like @powerbuoy and @danwellman. If you just want to format the first anchor tag nested inside an arbitrary tag (with id featured
) with an arbitrary nesting level, then I would prefer jQuery:
$('#featured a').first().css('background-color', 'yellow');
Example with a div, not 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 is better suited to your initial attempt at formatting the anchor tag in your question, since both solutions are split into list tags .
However, if you chose the list style then I would recommend a CSS solution.
source to share