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