Select First Element of Its Type $(":first-of-type")

$(":first-of-type")

e.g. $("div:first-of-type")

$(":first-of-type") selects elements that are first of their types within their parents i.e. NOT preceded by a sibling of the same element name .

Example 1: $("div:first-of-type") will select all <div> elements that are 1st element of type <div> within their parents.

<p>a</p>  //first of its type, but not <div> 
<div>b</div>  // <div> & first of its type, no other <div> preceding it
<div>c</div>  // <div>, but not first of its type 
Example 2: $(".d:first-of-type") will find elements with class='d' and >b>first of their type within their parents.
<div>
  <p>a</p>
  <span class="d">b</span>// first element of type <span> within its parent with class='d'
  <span>c</span>
</div>

<div>
  <span>d</span>  // first element of type <span> within its parent but without class='d'
  <p class="d">e</p> // first element of type <p> within its parent with class='d'
  <span class="d">f</span> // class='d' but not first of its type <span>
</div>
jQuery selector filter $(":first-of-type")