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

css

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

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

新着情報のソースコード

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

htmlのソースコード


	

		

			
2014.6.16

			
なんかしらの情報を載せる

		

		

			
2014.6.16

			
なんかしらの情報を載せる

		


		

			
2014.6.16

			
なんかしらの情報を載せる

		


		

			
2014.6.16

			
なんかしらの情報を載せる

		


		

			
2014.6.16

			
なんかしらの情報を載せる

		
    

		

			
2014.6.16

			
なんかしらの情報を載せる

		
   
		
		

			
2014.6.16

			
なんかしらの情報を載せる

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

CSSのソースコード

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

	/* 偶数行の背景色を変更 */
    dl:nth-child(even){
      background-color: #ff0000;
    }

    /* 奇数行の背景色を変更 */
    dl:nth-child(odd){
      background-color: #eee;
    }

    /* 任意の行数毎に背景色を変更(この例だと3nと指定しているので3行ごと) */
    dl:nth-child(3n) {
      background-color: #eee;
    }

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

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

対応ブラウザについて

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

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

	 $(function() {
        // dlの中で奇数番目のものを対象にする
        $('dl:odd').css({
            backgroundColor:'#eee'
        });
        // dlの中で偶数番目のものを対象にする
        $('dl:even').css({
            backgroundColor:'#ff0000'
        });
    });