: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