jquery - difference between :first and :first-child not clear

Question

i am having a ul li list

<ul>
<li>Parent
    <ul>
       <li>
          child1
       </li>
       <li>
          child2  
       </li>

    </ul>
</li>
</ul>

and i am trying to use a selector jQuery('ul li:first') and jQuery('ul li:first-child') both giving the same result this makes me confused about the difference between the two is there a example which clarifies the difference between two selectors

Answer 1

From Official Docs:

The :first pseudo-class is equivalent to :eq(0). It could also be written as :lt(1). While this matches only a single element, :first-child can match more than one: One for each parent.

While :first matches only a single element, the :first-child selector can match more than one: one for each parent. This is equivalent to :nth-child(1).

http://api.jquery.com/first-selector/

Update:

Here is an example using :first-child:

http://jsbin.com/olugu

You can view its soruce and edit yourself. If you replace :first-child with :first, it will only highlight the first word there. This is what is defined for them.

And here is example using :first:

http://jsbin.com/olugu/2