:first-child【先頭の子要素】
:last-child【最終の子要素】
:only-child【唯一の子要素】
メモ
- 先頭・最終・唯一の子要素を選択
- ":first-child"：先頭の子要素 (:nth-child(1) と同等)
- ":last-child"：最終の子要素
- ":only-child"：唯一の子要素
- 要素を指定する場合、 :first-of-type【先頭の該当子要素】・:last-of-type【最終の該当子要素】・:only-of-type【唯一の該当子要素】
構文
【先頭の子要素】
jQuery( ":first-child" ) 1.1.4
【最終の子要素】
jQuery( ":last-child" ) 1.1.4
【唯一の子要素】
jQuery( ":only-child" ) 1.1.4
関連
- jQuery リファレンス メモ
- CSS リファレンス メモ
- jQuery (英語)
例
<ol class="class1">
<li>項目
<li>項目
<li>項目
<li>項目
</ol>
<ol class="class1">
<li>項目
</ol>
<script>
$( ".class1 :first-child" ).css( "color", "red" ).append( " (先頭)" );
$( ".class1 :last-child" ).css( "color", "red" ).append( " (最終)" );
$( ".class1 :only-child" ).css( "color", "blue" ).append( " (唯一)" );;
</script>
- 項目
- 項目
- 項目
- 項目
- 項目
<div class="class2">
<div>DIV</div>
<span>SPAN</span>
<div>DIV</div>
<span>SPAN</span>
</div>
<p class="class2">
<span>SPAN</span>
</p>
<script>
$( ".class2 :first-child" ).css( "color", "red" ).append( " (先頭)" );
$( ".class2 :last-child" ).css( "color", "red" ).append( " (最終)" );
$( ".class2 :only-child" ).css( "color", "blue" ).append( " (唯一)" );
</script>
DIV
SPAN DIV
SPAN SPAN