:nth-child()【an+b番目の子要素】
:nth-last-child()【末尾からan+b番目の子要素】

メモ

構文

【an+b番目の子要素】 1.1.4
jQuery( ":nth-child(index)" ) 【固定位置】
jQuery( ":nth-child(even)" )  【偶数位置】
jQuery( ":nth-child(odd)" )   【奇数位置】
jQuery( ":nth-child(an+b)" )  【一定間隔の繰り返し位置】


【末尾からan+b番目の子要素】 1.9
jQuery( ":nth-last-child(index)" ) 【固定位置】
jQuery( ":nth-last-child(even)" )  【偶数位置】
jQuery( ":nth-last-child(odd)" )   【奇数位置】
jQuery( ":nth-last-child(an+b)" )  【一定間隔の繰り返し位置】

※an+bの指定は、 CSS :nth-child(an+b)【an+b番目の子要素】・:nth-last-child(an+b)【末尾からan+b番目の子要素】疑似クラス  参照

関連

例

<ol id="id1">
  <li>項目
  <li>項目
  <li>項目
  <li>項目
  <li>項目
  <li>項目
</ol>

<script>
$( "#id1 :nth-child(2)" ).css("color", "red").append(" (2)");
$( "#id1 :nth-child(even)" ).append(" (偶数)");
$( "#id1 :nth-child(odd)" ).append(" (奇数)");
$( "#id1 :nth-child(3n+1)" ).append(" (3n+1)");
$( "#id1 :nth-child(3n+2)" ).append(" (3n+2)");
$( "#id1 :nth-child(3n)" ).append(" (3n)");
</script>
  1. 項目
  2. 項目
  3. 項目
  4. 項目
  5. 項目
  6. 項目 

<ol id="id2">
  <li>項目
  <li>項目
  <li>項目
  <li>項目
  <li>項目
  <li>項目
</ol>

<script>
$( "#id2 :nth-last-child(2)" ).css("color", "red").append(" (2)");
$( "#id2 :nth-last-child(even)" ).append(" (偶数)");
$( "#id2 :nth-last-child(odd)" ).append(" (奇数)");
$( "#id2 :nth-last-child(3n+1)" ).append(" (3n+1)");
$( "#id2 :nth-last-child(3n+2)" ).append(" (3n+2)");
$( "#id2 :nth-last-child(3n)" ).append(" (3n)");
</script>
  1. 項目
  2. 項目
  3. 項目
  4. 項目
  5. 項目
  6. 項目 

<dl>
  <dt>用語
    <dd>説明
  <dt>用語
  <dt>用語
    <dd>説明
    <dd>説明
  <dt>用語
  <dt>用語
  <dt>用語
    <dd>説明
    <dd>説明
    <dd>説明
</dl>

<script>
$( "dl dd:nth-child(2)" ).css("color", "red").append(" (2)");
$( "dl dd:nth-child(6)" ).css("color", "red").append(" (6)");
$( "dl dd:nth-child(8)" ).css("color", "red").append(" (8)");  // 対象なし (dd 以外)
$( "dl dd:nth-child(11)" ).css("color", "red").append(" (11)");
</script>
用語
説明
用語
用語
説明
説明
用語
用語
用語
説明
説明
説明 

<style>
#id4 { border-collapse:collapse; }
#id4 th { border:1px black solid; width:50px; }
#id4 td { border:1px black solid; width:50px; }
.row1 { background-color:LightGreen; }
.row2 { background-color:LightSalmon; }
</style>

<table id="id4">
  <tr><th>Header<th>Header<th>Header<th>Header</tr>
  <tr><th>Header<td>Data<td>Data<td>Data</tr>
  <tr><th>Header<td>Data<td>Data<td>Data</tr>
  <tr><th>Header<td>Data<td>Data<td>Data</tr>
  <tr><th>Header<td>Data<td>Data<td>Data</tr>
  <tr><th>Header<td>Data<td>Data<td>Data</tr>
</table>

<script>
$( "#id4 tr:nth-child(3n+1)" ).addClass( "row1" );
$( "#id4 tr:nth-child(3n+2)" ).addClass( "row2" );
</script>

HeaderHeaderHeaderHeader
HeaderDataDataData
HeaderDataDataData
HeaderDataDataData
HeaderDataDataData
HeaderDataDataData

<style>
#id5 { border-collapse:collapse; }
#id5 th { border:1px black solid; width:50px; }
#id5 td { border:1px black solid; width:50px; }
.col1 { background-color:LightGreen; }
.col2 { background-color:LightSalmon; }
</style>

<table id="id5">
  <tr><th>Header<th>Header<th>Header<th>Header<th>Header<th>Header</tr>
  <tr><th>Header<td>Data<td>Data<td>Data<td>Data<td>Data</tr>
  <tr><th>Header<td>Data<td>Data<td>Data<td>Data<td>Data</tr>
  <tr><th>Header<td>Data<td>Data<td>Data<td>Data<td>Data</tr>
</table>

<script>
$( "#id5 td:nth-child(3n+1)" ).addClass( "col1" );
$( "#id5 td:nth-child(3n+2)" ).addClass( "col2" );
</script>

HeaderHeaderHeaderHeaderHeaderHeader
HeaderDataDataDataDataData
HeaderDataDataDataDataData
HeaderDataDataDataDataData