jQuery Tutorial Tutorials - jQuery :first selector

The :first selector selects the first matched DOM element.

• :first is same as :eq(0) and :lt(1),they will match only a single element.
• :first is different from :first-child. :first-child means it's first element of the parent element.

jQuery :first selector Syntax

$(':first')

jQuery :first selector Examples

In below example,We will find the first item in some UL elements.

<ul>
    <li>list1 item1</li>
    <li>list1 item2</li>
    <li>list1 item3</li>
</ul>
<ul>
    <li>list2 item1</li>
    <li>list2 item2</li>
    <li>list2 item3</li>
</ul>
<script>
    console.log($('li:first'));
    $('li:first').css('border','6px solid blue');
    $('li:eq(0)').css('border','4px solid red'); 
    //$('li:lt(1)').css('border','2px solid green');
</script>

the :first-child selector is quite different.

<ul>
    <li>list1 item1</li>
    <li>list1 item2</li>
    <li>list1 item3</li>
</ul>
<ul>
    <li>list2 item1</li>
    <li>list2 item2</li>
    <li>list2 item3</li>
</ul>
<script>
    console.log($('li:first-child'));
    $('li:first-child').css('border','2px solid red'); 
</script>

Try now