html - Difference between two selectors in jQuery -

in jquery there selector called first-child. selects first child matched element. instead of first-child if use first-of-type, works fine. wondering, difference?

$(function(){    //$('li :first-child').text('some text');    $('li :first-of-type').text('some text'); }); 

just read docs (:first-of-type , :first-child):

:first-child
selects elements first child of parent.

:first-of-type
selects elements first among siblings of same element name.

the :first-of-type selector match first element of given name (e.g. span, a etc) amongst set of siblings. example match:

<li>     <span>matches span</span>    <!-- first span amongst siblings -->     <a>matches a</span>          <!-- first amongst siblings -->     <a>doesn't match one</span>  <!-- second amongst siblings --> </li> 

the :first-child selector match first child of parent:

<li>     <span>matches span</span>    <!-- first child of parent -->     <a>doesn't match this</span>      <!-- second child of parent -->     <a>nor this</span>                <!-- third child of parent --> </li>