表やリストを見やすくするため、一行ごとに背景色をつける方法です。
擬似クラス（:nth-child）で設定するのでclass等を使用しなくてもよい（htmlを書き換えなくてもよい）ところがメリットです。
奇数行に背景色をつけるサンプル
テーブルの奇数行に背景色をつけるサンプルソースです。
tr:nth-child(odd) もしくは tr:nth-child(2n+1) で記述します。
|
1 2 3 |
tr:nth-child(2n+1) { background: #f8f8f8; } |
↓上記CSSスタイルをあてたサンプル
| タイトル１ | タイトル２ |
|---|---|
| 内容 | 内容 |
| 内容 | 内容 |
| 内容 | 内容 |
上記は奇数行に背景色を入れています。
※1行目は<th>に背景色を設定しているため、内容が入る偶数行に背景色がついているように見えます。
よく使用する擬似クラスをあげておきます。
※リスト(li)の場合は、trをliへ。
|
1 2 3 4 5 |
tr:nth-child(n) /* n番目の要素に適用 */ tr:nth-child(odd) /* 奇数番目の要素に適用 */ tr:nth-child(2n+1) /* 奇数番目の要素に適用 */ tr:nth-child(even) /* 偶数番目の要素に適用 */ tr:nth-child(2n) /* 偶数番目の要素に適用 */ |