CSS テーブル、リストに特定行に効果を指定
テーブルやリストの特定行をハイライトにしたい。
CSSの疑似クラスを利用すれば、簡単に特定の行に色を付けたりが簡単にできます。
カレンダーを作成する時や何かリストを出力する時に色を交互に分けるだけでも見やすさが格段にアップするのでお試しください。
nth-child
li:nth-child(even) {
background:#b0c4de;
}
li:nth-child(odd) {
background:#faebd7;
}
even → 偶数のみodd → 奇数のみ
他にも特定行や特定の倍数のみの場合も可能です。
2 → 2番めのみ
2n → 2の倍数
3n → 3の倍数
3n+1 → 3の倍数 + 1
リストサンプル
上記のnth-childをそのまま使用しております。- 1
- 2
- 3
- 4
テーブルサンプル
nth-childはリストだけではなくテーブルの行、列にも使用可能です。行に適用
trに擬似クラスを使用します。行に交互に色がつきます。
tr:nth-child(even) {
background:#b0c4de;
}
tr:nth-child(odd) {
background:#faebd7;
}
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 3-1 | 3-2 | 3-3 |
列に適用
tdに擬似クラスを使用します。列に交互に色がつきます。
td:nth-child(even) {
background:#b0c4de;
}
td:nth-child(odd) {
background:#faebd7;
}
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 3-1 | 3-2 | 3-3 |
