CSS3の「nth-child」セレクタを使います。
.dataTable tr:nth-child(even) {~} //偶数番目のtrを指定 .dataTable tr:nth-child(odd) {~} //奇数番目のtrを指定
「nth-child」自体は「親要素から見てn番目」を指定するセレクタで、下記のようにも扱えます。
.box p:nth-child(3) {~} //3番目の<p>を指定 .box p:nth-child(3n) {~} //3の倍数の<p>を指定 .box p:nth-child(3n+1) {~} //3の倍数+1(1,4,7~)の<p>を指定
一定フォーマットで出力するテーブルやリストなど、細かくクラスを振る必要が無くなるのでコードの軽量化も望めます。
tr:nth-child(0) th { //最初の行の<th>の文字を赤く color:#ff0000; } tr:nth-child(even) td { //偶数行のセルに背景を付ける background-color: #f0f0f0; }