ホームへ

【CSS】tableの行指定・列指定方法【奇数・偶数も可能】

「3行目だけ指定したい!」「5列目だけ指定したい!」「奇数行の色を変えたい!」

tableの行指定・列指定方法を紹介します。

【ポイント】: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)」を使いこなしてください。

【まとめ】tableの行指定・列指定方法

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

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

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

偶数:nth-of-type(2n)

奇数:nth-of-type(2n-1)

以上、tableの行指定・列指定方法でした。

マンガで読める関連記事