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

メモ

構文

構文 (:ホワイトスペース挿入可能位置)説明
E:nth-child(an +b)  { 【スタイル定義】 } 親要素の先頭からan + b番目の子E要素に適用 (a 個毎に反復)
E:nth-last-child(an +b)  { 【スタイル定義】 } 親要素の末尾からan + b番目の子E要素に適用 (a 個毎に反復)
E:nth-child (b)  { 【スタイル定義】 } 親要素の先頭からb番目の子E要素に適用 (単一要素:上記の a = 0 に相当)
E:nth-last-child (b)  { 【スタイル定義】 } 親要素の末尾からb番目の子E要素に適用 (単一要素:上記の a = 0 に相当)
E:nth-child (an-b { 【スタイル定義】 } 親要素の先頭からan - b番目の子E要素に適用 (a 個毎に反復)
E:nth-last-child (an -b)  { 【スタイル定義】 } 親要素の末尾からan - b番目の子E要素に適用 (a 個毎に反復)
E:nth-child (odd)  { 【スタイル定義】 } 親要素の先頭から奇数番目の子E要素に適用 (2n + 1 に相当)
E:nth-last-child (odd)  { 【スタイル定義】 } 親要素の末尾から奇数番目の子E要素に適用 (2n + 1 に相当)
E:nth-child (even)  { 【スタイル定義】 } 親要素の先頭から偶数番目の子E要素に適用 (2n に相当)
E:nth-last-child (even)  { 【スタイル定義】 } 親要素の末尾から偶数番目の子E要素に適用 (2n に相当)
変数説明
a (整数)反復の要素数
正の整数:順方向の反復
負の整数:逆方向の反復
b (正数) 反復開始要素オフセット位置
(nに0から順に適用して有効範囲内になった位置が開始位置)
n0 ≦ n の整数を適用

【:nth-child】
<style>
.ex1 { border: 1px blue solid; border-collapse: collapse; }
.ex1 th { border: 4px blue solid; }
.ex1 td { border: 1px blue solid; }
/* 先頭から4行目の指定 無効:tr:nth-child(even) より前に指定 */
.ex1 tr:nth-child( 4 ) { background-color: lightgreen; }
/* 先頭から6行目の指定 有効:!important 指定 */
.ex1 tr:nth-child( 6 ) { background-color: lightgreen !important; }
/* 先頭から偶数行 */
.ex1 tr:nth-child(odd) { background-color: lightyellow; }
/* 先頭から奇数行 */
.ex1 tr:nth-child(even) { background-color: lightcyan; }
/* 先頭から9行目の指定 有効:tr:nth-child(even) より後に指定 */
.ex1 tr:nth-child( 9 ) { background-color: lightgreen; }
/* 先頭から7列毎の指定 */
.ex1 th:nth-child(7n-1) { background-color: lightblue; }
.ex1 td:nth-child(7n-1) { background-color: lightblue; }
.ex1 th:nth-child( 7n ) { background-color: lightpink; }
.ex1 td:nth-child( 7n ) { background-color: lightpink; }
/* 先頭から17列目より前の7列毎の指定 */
.ex1 td:nth-child(-7n + 17) { background-color: lightgreen; }
/* 先頭から25列目の指定 */
.ex1 th:nth-child(25)  { background-color: red; }
.ex1 td:nth-child(25)  { background-color: red; }
</style>

<table class="ex1">
・・・
</table>

<th>要素<td>要素
1234567891011 12131415161718192021 222324252627282930313233/11
201020304050607080910 11121314151617181920 212223242526272829303110
39
48
57
66
75
84
93
102
11/3332313029282726252423 22212019181716151413 121110987654321

【:nth-last-child】
<style>
.ex2 { border: 1px blue solid; border-collapse: collapse; }
.ex2 th { border: 4px blue solid; }
.ex2 td { border: 1px blue solid; }
/* 末尾から4行目の指定 無効:tr:nth-last-child(even) より前に指定 */
.ex2 tr:nth-last-child( 4 ) { background-color: lightgreen; }
/* 末尾から6行目の指定 有効:!important 指定 */
.ex2 tr:nth-last-child( 6 ) { background-color: lightgreen !important; }
/* 末尾から偶数行 */
.ex2 tr:nth-last-child(odd) { background-color: lightyellow; }
/* 末尾から奇数行 */
.ex2 tr:nth-last-child(even) { background-color: lightcyan; }
/* 末尾から9行目の指定 有効:tr:nth-last-child(even) より後に指定 */
.ex2 tr:nth-last-child( 9 ) { background-color: lightgreen; }
/* 末尾から7列毎の指定 */
.ex2 th:nth-last-child( 7n ) { background-color: lightblue; }
.ex2 td:nth-last-child( 7n ) { background-color: lightblue; }
.ex2 th:nth-last-child(7n-1) { background-color: lightpink; }
.ex2 td:nth-last-child(7n-1) { background-color: lightpink; }
/* 末尾から17列目より後の7列毎の指定 */
.ex2 td:nth-last-child(-7n + 17) { background-color: lightgreen; }
/* 末尾から25列目の指定 */
.ex2 th:nth-last-child(25)  { background-color: red; }
.ex2 td:nth-last-child(25)  { background-color: red; }
</style>

<table class="ex2">
・・・
</table>

<th>要素<td>要素
1234567891011 12131415161718192021 222324252627282930313233/11
201020304050607080910 11121314151617181920 212223242526272829303110
39
48
57
66
75
84
93
102
11/3332313029282726252423 22212019181716151413 121110987654321

関連