テーブルの列(たて)や、行(よこ)の背景色を交互に変更したいというときのCSSの記述のやり方です。
1列ごと(または1行ごと)に背景色を変えるときは、偶数・奇数のどちらかに指定してあげればよいということなので、擬似クラスの:nth-child(n)を使います。
1列ごとに背景色を指定する
td:nth-child(even) {
background-color: #ddd;
}
上に書いた例では、偶数番目のtd要素に背景色を指定しています。
偶数のときはevenですが、奇数にしたいときはoddを使います。
1行ごとに背景色を指定する
tr:nth-child(even) {
background-color: #ddd;
}
偶数番目のtr要素の背景色を指定したときの書き方です。
こちらに指定したときのサンプルを載せておきます。
:nth-child(n)は、今回のテーブル以外でも箇条書きのときなどで使う場面があったりするので、覚えていると便利ですよね。
