first-child problems with jquery

Question

Show me another way to write so it finds the first A:

$("UL.tab LI A.selected, UL.tab LI A:first-child").corner("tl:7px bl:7px");

As my Jquery doesnt seem to go for the first A tag!?

Markup:

<ul class="tabNavigation">
            <li><a href="#Description" class="selected">Description</a></li>
            <li><a href="#Details">Details</a></li>
            <li><a href="#Features">Features</a></li>
            <li><a href="#SpareParts">Spare Parts</a></li>
            <li><a href="#Downloads">Downloads</a></li>
          </ul>

Answer 1

For your markup you can use the following selector:

$("ul.tabNavigation li:first a").corner("tl:7px bl:7px");

Here is better to use :first selector for <li> , since <a> is always the :first-child of <li> .

Answer 2

$('ul.tab li a.selected :first')

Answer 3

If you want to select the first ANCHOR element (the one that's inside the first LI element), you can do this:

$( 'a:first', '.tabNavigation' )

Usually, you want your "main" elements to be available as references throughout your code (so that you don't have to query them repeatedly). For instance you can retrieve the reference to the UL element beforehand:

var tabnav = $( '.tabNavigation' )[0];

and then when you want to select the first ANCHOR, you do this:

$( 'a:first', tabnav )

This will perform very well.

Similarly, to select the ANCHOR that has the "selected" class:

$( 'a.selected', tabnav )