【CSS】CSSで行ごとに背景色を交互に変更するには?

css

結構、新着情報などの背景色を交互に表示して行ごとに分かりやすくしているサイトを見てそれを実装しようとしたが、更新するたびに行ごとにクラスをつけたり外したりするのめんどくさいのでどうするか試してみた。

取り合えず新着情報みたいのをサンプルで作ってみますか。

新着情報のソースコード

そんな難しいことでもないので、簡単にhtmlとCSSのソースコードを張っておきます。

htmlのソースコード

今回はとりあえずdl要素を使ってdlごとに背景色をつけるような設定にしたいと思う。

CSSのソースコード

今回はCSSのみでの背景色の変更したいので、nth-child擬似クラスを使用すればわざわざ更新のたびにクラスを変える必要はないので楽です。

nth-child擬似クラスには奇数(odd)、偶数(even)の値を指定してあげれば自動的にそれぞれ指定した背景色が設定されます。

任意の行数ごとに背景色を指定したい場合は、nth-child擬似クラスに数値とn・・3行ごとなら3nと指定してあげればいい。

対応ブラウザについて

上記のようにnth-child擬似クラスを仕様すれば楽にできますが、なんとIE8だと対応していないので使いないようです。。相変わらずIEはクソですねw

ということで、その場合はjQueryで対応してあげればよいと思うので下記のようにjQueryのセレクターで奇数(odd)、偶数(even)を指定してあげればいいと思います。