:first-of-type【先頭の該当子要素】
:last-of-type【最終の該当子要素】
:only-of-type【唯一の該当子要素】

メモ

構文

【先頭の該当子要素】
jQuery( ":first-of-type" ) 1.9


【最終の該当子要素】
jQuery( ":last-of-type" ) 1.9


【唯一の該当子要素】
jQuery( ":only-of-type" ) 1.9

関連

例

<dl>
  <dt>用語１
    <dd>説明１
  <dt>用語２
    <dd>説明２
  <dt>用語３
    <dd>説明３
  <dt>用語４
    <dd>説明４
</dl>

<dl>
  <dt>用語Ａ
  <dt>用語Ｂ
  <dt>用語Ｃ
    <dd>説明
</dl>

<script>
$("dt:first-of-type").css( "color", "red" ).append( " (先頭)" );
$("dt:last-of-type").css( "color", "red" ).append( " (最終)" );
$("dd:only-of-type").css( "color", "blue" ).append( " (唯一)" );
</script>
用語１
説明１
用語２
説明２
用語３
説明３
用語４
説明４
用語Ａ
用語Ｂ
用語Ｃ
説明 

<div class="class2">
  <div>DIV</div>
  <span>SPAN</span>
  <div>DIV</div>
  <span>SPAN</span>
  <div>DIV</div>
  <span>SPAN</span>
  <div>DIV</div>
</div>

<br>
<div class="class2">
  <div>DIV</div>
  <span>SPAN</span>
  <div>DIV</div>
</div>

<script>
$( ".class2 span:first-of-type" ).css( "color", "red" ).append( " (先頭)" );
$( ".class2 span:last-of-type" ).css( "color", "red" ).append( " (最終)" );
$( ".class2 span:only-of-type" ).css( "color", "blue" ).append( " (唯一)" );
</script>

DIV
SPAN
DIV
SPAN
DIV
SPAN
DIV

DIV
SPAN
DIV