:first-child【先頭の子要素】
:last-child【最終の子要素】
:only-child【唯一の子要素】

メモ

構文

【先頭の子要素】
jQuery( ":first-child" ) 1.1.4

【最終の子要素】
jQuery( ":last-child" ) 1.1.4

【唯一の子要素】
jQuery( ":only-child" ) 1.1.4

関連


<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>
  1. 項目
  2. 項目
  3. 項目
  4. 項目
  1. 項目

<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