CSS3 :nth-child疑似クラスを使って、先頭から数えてn番目の子要素にcssを適用

CSS3 :nth-child疑似クラスを使うと、ある要素が内包する子要素のうち、先頭から数えてn番目のみにcssを適用できます。単体に適用するのはもちろん、「:nth-child(2n+1)などを使って、繰り返して適用することもできます。
また、:nth-child疑似クラスを指定した子要素の下の階層で更に:nth-child疑似クラスを指定することで、やや複雑な繰り返し適用も可能です。

サンプル（１）は、divボックスの中に、p要素が10個入っています。

このうち、「p:nth-child(3n+1)」で、3つ毎の1番目のp要素の背景を水色、「p:nth-child(3n+1)」で、3つ毎の2番目のp要素の背景をピンクに指定しています。

サンプル（１）CSSソース

.sample01 p:nth-child(3n+1)   {	
	background:#cdf;
	}
.sample01 p:nth-child(3n+2)   {	
	background:#fcc;
	}

サンプル（１）

子要素のpタグ１-ダミーテキストダミーテキストダミーテキスト

子要素のpタグ2-ダミーテキストダミーテキストダミーテキスト

子要素のpタグ3-ダミーテキストダミーテキストダミーテキスト

子要素のpタグ4-ダミーテキストダミーテキストダミーテキスト

子要素のpタグ5-ダミーテキストダミーテキストダミーテキスト

子要素のpタグ6-ダミーテキストダミーテキストダミーテキスト

子要素のpタグ7-ダミーテキストダミーテキストダミーテキスト

子要素のpタグ8-ダミーテキストダミーテキストダミーテキスト

子要素のpタグ9-ダミーテキストダミーテキストダミーテキスト

子要素のpタグ10-ダミーテキストダミーテキストダミーテキスト

サンプル（２）は、divボックスの中に、5行5列のtable要素が入っています。

このtableの子要素のtrに対し、「tr:nth-child(2n+1)」と指定して、2つ毎の1番目のtr要素（行）の背景を水色にしています。次に、「tr:nth-child(2n+1)>td:nth-child(2n+1)」と指定して、前記のすべての水色背景のtr（行）の直下の子要素であるtd（列）の2つ毎の1番目の背景をピンクにしています。

サンプル（２）CSSソース

.sample02 table tr:nth-child(2n+1) {
    background: #cdf;
    }	
.sample02 table tr:nth-child(2n+1)>td:nth-child(2n+1) {
    background: #fcc;
    }

サンプル（２）

ダミー 1-1	ダミー 1-2	ダミー 1-3	ダミー 1-4	ダミー 1-5
ダミー 2-1	ダミー 2-2	ダミー 2-3	ダミー 2-4	ダミー 2-5
ダミー 3-1	ダミー 3-2	ダミー 3-3	ダミー 3-4	ダミー 3-5
ダミー 4-1	ダミー 4-2	ダミー 4-3	ダミー 4-4	ダミー 4-5
ダミー 5-1	ダミー 5-2	ダミー 5-3	ダミー 5-4	ダミー 5-5