oddとevenを使って繰り返しタグの奇数・偶数毎に交互に背景色を表示



oddとevenを使って繰り返しされているリスト(li)タグの
奇数・偶数毎に交互に異なる背景色を表示してみます。

1.CSSの記述例

以下は任意です。

<style>
.clWrap{
	width:700px;
	margin:0 auto;
	text-align:left;
}
.clCat{
	width:200px;
	margin:0 auto;
}
ul{
	margin:0;
	padding:0;
}
li{
	list-style:none;
	line-height:1.4em;
}
li a{
	width:100%;
	height:100%;
}
</style>

2.読込むJsファイルとJavaScriptの記述例

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	//奇数
	$(".clCat li:odd a").css('background-color', '#B9DCFF');
	//偶数
	$(".clCat li:even a").css('background-color', '#FFEEE8');
});
</script>

3.HTMLの記述例

	<div class="clCat">
<ul>
<li><a href="/category/css" title="CSS に含まれる投稿をすべて表示">CSS</a></li>
<li><a href="/category/facebook" title="Facebook に含まれる投稿をすべて表示">Facebook</a></li>
<li><a href="/category/html5" title="HTML5 に含まれる投稿をすべて表示">HTML5</a></li>
<li><a href="/category/javascript" title="JavaScript に含まれる投稿をすべて表示">JavaScript</a></li>
<li><a href="/category/javascript/ajax" title="Ajax に含まれる投稿をすべて表示">Ajax</a></li>
<li><a href="/category/javascript/jquery" title="jQuery に含まれる投稿をすべて表示">jQuery</a></li>
<li><a href="/category/php" title="PHP に含まれる投稿をすべて表示">PHP</a></li>
<li><a href="/category/php/smarty" title="Smarty に含まれる投稿をすべて表示">Smarty</a></li>
<li><a href="/category/seo" title="SEO に含まれる投稿をすべて表示">SEO</a></li>
<li><a href="/category/wordpress" title="WordPress に含まれる投稿をすべて表示">WordPress</a></li>
<li><a href="/category/sonohoka" title="その他 に含まれる投稿をすべて表示">その他</a></li>
<li><a href="/category/smartphone" title="スマートフォン に含まれる投稿をすべて表示">スマートフォン</a></li>
<li><a href="/category/smartphone/android" title="Android に含まれる投稿をすべて表示">Android</a></li>
</ul>
    </div><!--/clCat-->

oddとevenを使って、奇数・偶数毎に交互に背景色を変更表示したデモ

自分は繰り返しのタグに毎回classを指定してましたが、
これだと追加・削除された時に都度記述を修正しなくて済むので便利ですね。
これって古いIEのバージョンも対応してるのでしょうか。