リストやテーブルなどで擬似クラス:nth-child(n)を使って一定の規則に従い背景色などを変える

リストやテーブルのセルの可視性を良くするために、li,tr,th,tdなどの背景色を交互に変える手法がありますが、CSSの擬似クラスである「:nth-child(n)」を利用してそれを実現することができます。

デモサンプル

1.<li>タグの場合

指定の順番の要素に指定する場合

:nth-child(n)

▼3番目の要素にだけ背景色グレーを指定

偶数に指定する場合

:nth-child(even)
:nth-child(2n)

▼2番目,4番目,6番目…etc (偶数に指定する場合)

奇数に指定する場合

:nth-child(odd)
:nth-child(2n+1)

▼1番目,3番目,5番目…etc (奇数に指定する場合)

2.<tr>,<th>,<td>タグの場合

偶数に指定する場合(行)

tr:nth-child(2n)

▼<tr>タグに指定します。

偶数に指定する場合(列)

th:nth-child(2n)
td:nth-child(2n)

▼<th>,<td>タグに指定します。

3.IE8以下への対応方法

※:nth-child()はIE8以下で未対応のですが、jQueryを読み込み「addClass」で定義することで対処が可能です。

jQuery本体を読み込み、.addClassで任意のクラス名を定義します。（サンプルは「li_even」を定義）

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("li:nth-child(even)")
	.addClass("li_even");
});
</script>

$(function(){

$("li:nth-child(even)")

.addClass("li_even");

});

</script>

CSSに定義するクラス名で背景色を指定

.li_even {
	background:#98ccf0;
}

.li_even {

background:#98ccf0;

}

すると、IE8以下でもこの「:nth-child()」が対応されて背景色が変わります。

背景色だけに限らず、指定した「一定の規則に従って」CSSを適用することが出来ますので様々な指示に活用できますね。