【CSS】tableの奇数行,偶数行・奇数列,偶数列の指定方法

「表の奇数行と偶数行の色を変えたい！」

tableの奇数行・偶数行、奇数列・偶数列を指定する方法を紹介します。

結論

• 【偶数行】tr:nth-of-type(2n) td
• 【奇数行】tr:nth-of-type(2n-1) td
• 【偶数列】td:nth-of-type(2n)
• 【奇数列】td:nth-of-type(2n-1)

下記より詳しく解説します。

【ポイント】:nth-of-type(n)を使う

「:nth-of-type(n)」は「n番目の…」と指定できる疑似クラス（セレクタ）です。

nには数字か数式が入ります。

これを使うと「上から何番目の行」「左から何番目の列」を指定できます。

【後ろから数えるなら】:nth-last-of-type(n)

「一番下の行、一番右の列を指定したい！」というときは「:nth-last-of-type(n)」を使いましょう。

これを使うと「下から何番目の行」「右から何番目の列」を指定できます。

【行指定】tr:nth-of-type(n) td

セル1-1	セル1-2	セル1-3	セル1-4	セル1-5	セル1-6
セル2-1	セル2-2	セル2-3	セル2-4	セル2-5	セル2-6
セル3-1	セル3-2	セル3-3	セル3-4	セル3-5	セル3-6
セル4-1	セル4-2	セル4-3	セル4-4	セル4-5	セル4-6

CSS

tr:nth-of-type(3) td{
    background: #c0e0fc;
}

tableの行は必ずtrに囲まれています。

よってtrが何番目か指定すると行数を指定できます。

trにはCSSを指定せず、その子要素のtdにCSSを指定しましょう。

3行目を指定したいときは「tr:nth-of-type(3) td」と指定します。

【偶数行】tr:nth-of-type(2n) td

セル1-1	セル1-2	セル1-3	セル1-4	セル1-5	セル1-6
セル2-1	セル2-2	セル2-3	セル2-4	セル2-5	セル2-6
セル3-1	セル3-2	セル3-3	セル3-4	セル3-5	セル3-6
セル4-1	セル4-2	セル4-3	セル4-4	セル4-5	セル4-6

tr:nth-of-type(2n) td{
    background: #c0e0fc;
}

偶数は2の倍数です。数式にすると「2n」となります。

「:nth-of-type(2n)」と指定すると偶数になります。

「:nth-of-type(even)」も偶数です。個人的には「2n」のほうが覚えやすいです。

【奇数行】tr:nth-of-type(2n-1) td

セル1-1	セル1-2	セル1-3	セル1-4	セル1-5	セル1-6
セル2-1	セル2-2	セル2-3	セル2-4	セル2-5	セル2-6
セル3-1	セル3-2	セル3-3	セル3-4	セル3-5	セル3-6
セル4-1	セル4-2	セル4-3	セル4-4	セル4-5	セル4-6

tr:nth-of-type(2n-1) td{
    background: #c0e0fc;
}

偶数は2の倍数です。奇数は偶数から1つずらした数字となります。

数式にすると「2n-1」または「2n+1」となります。どちらでもOKです。

「:nth-of-type(2n-1)」または「:nth-of-type(2n+1)」と指定すると奇数になります。

「:nth-of-type(odd)」も奇数です。個人的には「2n-1」または「2n+1」のほうが覚えやすいです。

一行目がth（タイトル）のとき

「tr:nth-of-type(n)」は何番目のtrかを数えています。一行目がthであろうがtrは1番目です。

一行目を除くと考えると「2n」は「2n-1」、「2n+1」は「2n+1-1」=「2n」となり、偶数と奇数が入れ替わりますので注意しましょう。

タイトル1	タイトル2	タイトル3	タイトル4	タイトル5	タイトル6
セル1-1	セル1-2	セル1-3	セル1-4	セル1-5	セル1-6
セル2-1	セル2-2	セル2-3	セル2-4	セル2-5	セル2-6
セル3-1	セル3-2	セル3-3	セル3-4	セル3-5	セル3-6
セル4-1	セル4-2	セル4-3	セル4-4	セル4-5	セル4-6

tr:nth-of-type(2n-1) td{
    background: #c0e0fc;
}

↑奇数行(2n-1)を指定していますが、タイトル行が1行目、普通行が2行目から始まるため、普通行の偶数行が指定されます。

また、CSSでは「td」を指定しているため「th」には適用されません。

thにもCSSを指定したい場合は「tr:nth-of-type(2n-1) th」のように追加しましょう。

とはいえ、実際thは最初の行でしか使わないため「n番目の…」という指定は不要で「th」だけの指定でよいでしょう。

任意で指定したいとき

「行数が増えたり減ったりしてもこの行を押さえておきたい！」というときは任意のtrにclassをつけましょう。

【列指定】td:nth-of-type(n)

セル1-1	セル1-2	セル1-3	セル1-4	セル1-5	セル1-6
セル2-1	セル2-2	セル2-3	セル2-4	セル2-5	セル2-6
セル3-1	セル3-2	セル3-3	セル3-4	セル3-5	セル3-6
セル4-1	セル4-2	セル4-3	セル4-4	セル4-5	セル4-6

td:nth-of-type(3){
    background: #c0e0fc;
}

列は特定のhtmlタグには囲まれていません。

ただし、tdの数はどの行でも同じです。

これを利用して「すべての行のn番目のtd」を指定すると列を指定できます。

「td:nth-of-type(3)」と指定すると3列目を指定できます。

【偶数列】td:nth-of-type(2n)

セル1-1	セル1-2	セル1-3	セル1-4	セル1-5	セル1-6
セル2-1	セル2-2	セル2-3	セル2-4	セル2-5	セル2-6
セル3-1	セル3-2	セル3-3	セル3-4	セル3-5	セル3-6
セル4-1	セル4-2	セル4-3	セル4-4	セル4-5	セル4-6

td:nth-of-type(2n){
    background: #c0e0fc;
}

偶数は2の倍数です。数式にすると「2n」となります。

「:nth-of-type(2n)」と指定すると偶数になります。

「:nth-of-type(even)」も偶数です。個人的には「2n」のほうが覚えやすいです。

【奇数列】td:nth-of-type(2n-1)

セル1-1	セル1-2	セル1-3	セル1-4	セル1-5	セル1-6
セル2-1	セル2-2	セル2-3	セル2-4	セル2-5	セル2-6
セル3-1	セル3-2	セル3-3	セル3-4	セル3-5	セル3-6
セル4-1	セル4-2	セル4-3	セル4-4	セル4-5	セル4-6

td:nth-of-type(2n-1){
    background: #c0e0fc;
}

偶数は2の倍数です。奇数は偶数から1つずらした数字となります。

数式にすると「2n-1」または「2n+1」となります。どちらでもOKです。

「:nth-of-type(2n-1)」または「:nth-of-type(2n+1)」と指定すると奇数になります。

「:nth-of-type(odd)」も奇数です。個人的には「2n-1」または「2n+1」のほうが覚えやすいです。

一列目がth（タイトル）のとき

「td:nth-of-type(n)」は何番目のtdかを数えています。一列目がthの場合1つめのtdはthの次のtdとなります。

一列目を除くと考えると、行のときと違い、列の場合は奇数と偶数が入れ替わりません。

タイトル1	セル1-1	セル1-2	セル1-3	セル1-4	セル1-5	セル1-6
タイトル2	セル2-1	セル2-2	セル2-3	セル2-4	セル2-5	セル2-6
タイトル3	セル3-1	セル3-2	セル3-3	セル3-4	セル3-5	セル3-6
タイトル4	セル4-1	セル4-2	セル4-3	セル4-4	セル4-5	セル4-6

td:nth-of-type(2n-1){
    background: #c0e0fc;
}

↑奇数列(2n-1)を指定しており、タイトル列が1列目、普通列が2列目から始まりますが、普通列の奇数列が指定されます。

また、CSSでは「td」を指定しているため「th」には適用されません。

任意で指定したいとき

「列数が増えたり減ったりしてもこの列を押さえておきたい！」というときは任意の各tdにclassを指定しましょう。

複雑な指定をしたいとき

• n行目以降すべて
• n行目まで
• n行目からn行目まで

のように複雑な指定も可能です。

詳しくは下記記事を参考に「:nth-of-type(n)」を使いこなしてください。

【まとめ】奇数,偶数行・奇数,偶数列指定方法

:nth-of-type(n)を使い、nに指定したい行数・列数を入れる

• 【偶数行】tr:nth-of-type(2n) td
• 【奇数行】tr:nth-of-type(2n-1) td
• 【偶数列】td:nth-of-type(2n)
• 【奇数列】td:nth-of-type(2n-1)

以上、tableの奇数行・偶数行、奇数列・偶数列を指定する方法でした。