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

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

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

サンプル(1)CSSソース

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

サンプル(1)

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

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

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

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

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

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

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

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

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

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

 

サンプル(2)は、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番目の背景をピンクにしています。

サンプル(2)CSSソース

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

サンプル(2)

ダミー 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
戻るボタン