[jQuery]first-of-typeセレクタ

バージョン1.9から追加されたセレクタ。

親要素内で、セレクタで指定した要素が最初に出現する要素が選択される。

例

この例だと、div要素内で最初に出現するspanタグが選択される。
(hogeとあいうえおのspanタグ)

<div>
  <span>hgoe</span>
  <span>fuga</span>
</div>
<div>
  <span>あいうえお</span>
  <span>かきくけこ</span>
  <span>さしすせそ</span>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $("span:first-of-type").css({
    color: 'red'
  });

</script>

表示結果

選択された最初のspanタグにスタイルが設定されているのがわかる。

※first-of-typeと逆のlast-of-typeセレクタもある。