Photo by: kris krüg
「TABLEを使う時に奇数偶数の背景をそれぞれ別にしたいんだが・・・。」
って思うときありませんか？
そんな時は、力業（style）で指定するか、あきらめる人って結構いると思いますが、実に便利なスタイルシートが存在するって知ってましたか？
連続するタグの奇数・偶数を指定できる魔法のスタイルシート「nth-child(odd)」「nth-child(even)」
百聞は一見に如かず。このスタイルシートを貼り付けて見ましょう。
tr:nth-child(odd) {
background-color: #f9f9f9;
}
tr:nth-child(even) {
background-color: #FDFDFD;
}
するとTABLEの行で奇数偶数の背景が別々になります。こんな感じで。↓↓
| 例 |
|---|
| おれは偶数だぜ！ |
| おれって奇数だろ？ |
| おれも偶数だぜ！ |
| おまえも奇数なのか？ |
ちなみに、「:nth-child(odd)」が奇数で、「:nth-child(even)」が偶数を指定できます。
もちろん、LIタグやDIVタグやSECTIONタグなどのタグでも使用可能です。
ちなみに、クラスやIDやタグもコミコミで指定したい場合は以下のように書きます。
#relatedBody li:nth-child(odd){
float:left;
}
#relatedBody li:nth-child(even){
float:right;
}
連続するタグで奇数偶数を別々に指定したい場合にぜひ使ってみましょう。便利ですよー。
あとがき
TABLEタグでは特に力を発揮するタグです。やっぱり見やすさが全然違ってきますからねー。
知らなかった方はぜひ活用してみてください。
