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

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

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

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

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

<script>
$( "#id1 li:nth-of-type(2)" ).css("color", "red").append(" (2)");
$( "#id1 li:nth-of-type(even)" ).append(" (偶数)");
$( "#id1 li:nth-of-type(odd)" ).append(" (奇数)");
$( "#id1 li:nth-of-type(3n+1)" ).append(" (3n+1)");
$( "#id1 li:nth-of-type(3n+2)" ).append(" (3n+2)");
$( "#id1 li:nth-of-type(3n)" ).append(" (3n)");
</script>

1. 項目
2. 項目
3. 項目
4. 項目
5. 項目
6. 項目

---

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

<script>
$( "#id2 li:nth-last-of-type(2)" ).css("color", "red").append(" (2)");
$( "#id2 li:nth-last-of-type(even)" ).append(" (偶数)");
$( "#id2 li:nth-last-of-type(odd)" ).append(" (奇数)");
$( "#id2 li:nth-last-of-type(3n+1)" ).append(" (3n+1)");
$( "#id2 li:nth-last-of-type(3n+2)" ).append(" (3n+2)");
$( "#id2 li:nth-last-of-type(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-of-type(1)" ).css("color", "red").append(" (1)");
$( "dl dd:nth-of-type(3)" ).css("color", "red").append(" (3)");
$( "dl dd:nth-of-type(5)" ).css("color", "red").append(" (5)");
</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-of-type(3n+1)" ).addClass( "row1" );
$( "#id4 tr:nth-of-type(3n+2)" ).addClass( "row2" );
</script>

Header	Header	Header	Header
Header	Data	Data	Data
Header	Data	Data	Data
Header	Data	Data	Data
Header	Data	Data	Data
Header	Data	Data	Data

---

<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-of-type(3n+1)" ).addClass( "col1" );
$( "#id5 td:nth-of-type(3n+2)" ).addClass( "col2" );
</script>

Header	Header	Header	Header	Header	Header
Header	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data