: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>用語1
    <dd>説明1
  <dt>用語2
    <dd>説明2
  <dt>用語3
    <dd>説明3
  <dt>用語4
    <dd>説明4
</dl>

<dl>
  <dt>用語A
  <dt>用語B
  <dt>用語C
    <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>
用語1
説明1
用語2
説明2
用語3
説明3
用語4
説明4
用語A
用語B
用語C
説明

<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