【CSS】CSSのみでテーブルの行を1行おきに背景色を変更（nth-child）

テーブルの行背景色を偶数行と奇数行で背景を変えたいときなど、
CSSの「nth-child」を使えば簡単に出来るみたいです。

CSSのサンプル

table.test tbody tr:nth-child(2n+1) {
background-color:#696969;
color: white;
}
table.test tbody tr:nth-child(2n+0) {
background-color:#f5f5f5;
}

詳しい説明は下の方で。

htmlサンプル

No
program




1
java


2
php


3
ruby


4
perl


5
python

デモ

No	program
1	java
2	php
3	ruby
4	perl
5	python

ポイントとしては、「th」の背景色を変えたくないので、「tbody」タグを入れて
「tbody」以下でスタイルが適用されるようにしているところです。

あと、今回の記事で紹介した「nth-child」の使い方としては、こんな感じです。

E:nth-child(n)
tr:nth-child(2n+1) /* represents every odd row of an HTML table →奇数*/
tr:nth-child(odd) /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table →偶数*/
tr:nth-child(even) /* same */

詳しくはW3Cの下記のサイトを参照ください。
http://www.w3.org/TR/selectors/#nth-child-pseudo