CSSでテーブルの奇数行・偶数行の背景に色をつけるメモ #CSS

CSSでテーブルの奇数行・偶数行の背景に色をつけるメモ #CSS

CSS3になって便利なことといえば、擬似要素のnth-childでしょう。

それまでは、javascriptでやるしかなかったテーブルの奇数行や偶数行の背景に色をつけるということも、CSSだけでできるようになりました。

奇数行の背景に色をつける

上記のような何でもないテーブルにCSSを設定します。

nth-child()の()の中に奇数を表す数列の2n-1を入れると…

1行目
2行目
3行目
4行目
5行目

こんな風に奇数行の背景に色がつきます。

偶数行の背景に色をつける

偶数行の背景に色をつけるときは、nth-child()の()の中に偶数を表す数列の2nを入れます

1行目
2行目
3行目
4行目
5行目

こんな風に偶数行の背景に色がつきます。

せっかくだから数列を確認

nth-child()の()の中の数列によって、どの行に背景色を設定するか決めることができます。

数列 設定される場所
2n-1 奇数行
2n 偶数行
3n 3の倍数行
5n 5の倍数行

という感じで、簡単な等差数列で適用できます。


Back to Top