:first-of-type【先頭の該当子要素】
:last-of-type【最終の該当子要素】
:only-of-type【唯一の該当子要素】
メモ
- 先頭・最終・唯一の該当子要素を選択
- ":first-of-type":先頭の該当子要素
- ":last-of-type":最終の該当子要素
- ":only-of-type":唯一の該当子要素
- 同一の兄弟要素内で選択
- 要素については、HTML5 リファレンス メモ 参照
- 要素を指定しない場合、 :first-child【先頭の子要素】・:last-child【最終の子要素】・:only-child【唯一の子要素】
構文
【先頭の該当子要素】
jQuery( ":first-of-type" ) 1.9
【最終の該当子要素】
jQuery( ":last-of-type" ) 1.9
【唯一の該当子要素】
jQuery( ":only-of-type" ) 1.9
関連
- jQuery リファレンス メモ
- CSS リファレンス メモ
- jQuery (英語)
例
<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
- 用語B
- 説明
<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