liやtrで一行ごとに背景色をつける方法

表やリストを見やすくするため、一行ごとに背景色をつける方法です。
擬似クラス(:nth-child)で設定するのでclass等を使用しなくてもよい(htmlを書き換えなくてもよい)ところがメリットです。

奇数行に背景色をつけるサンプル

テーブルの奇数行に背景色をつけるサンプルソースです。

tr:nth-child(odd) もしくは tr:nth-child(2n+1) で記述します。

CSS

tr:nth-child(2n+1) {
  background: #f1f1f1;
}

↓上記CSSスタイルをあてたサンプル

項目1 内容1
項目2 内容2
項目3 内容3
項目4 内容4

上記は奇数行に背景色を入れています。
例えば、上記の例で1行目に<th>で表見出しを挿入した場合、背景色がつくのは、項目2・内容2/項目4・内容4の行にズレたように見えます。

項目名 内容
項目1 内容1
項目2 内容2
項目3 内容3
項目4 内容4

よく使用する擬似クラスをあげておきます。
※リスト””の場合は、”tr”を”li”で置き換え。

CSS

tr:nth-child(n) /* n番目の要素に適用 */
tr:nth-child(odd) /* 奇数番目の要素に適用 */
tr:nth-child(2n+1) /* 奇数番目の要素に適用 */
tr:nth-child(even) /* 偶数番目の要素に適用 */
tr:nth-child(2n) /* 偶数番目の要素に適用 */