表やリストを見やすくするため、一行ごとに背景色をつける方法です。
擬似クラス（: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 |
上記は奇数行に背景色を入れています。
例えば、上記の例で１行目に<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) /* 偶数番目の要素に適用 */