: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>用語１
<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