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

CSS3 :nth-of-type疑似クラスは、子要素のうち、指定した要素の先頭から数えてn番目にcssを適用するもので、:nth-child疑似クラスとよく似ています。違いというと、:nth-of-type疑似クラスは、対象の子要素の要素の種類を指定し、:nth-child疑似クラスは、指定しません。

サンプル（１）は、divボックスの中に、子要素として、p要素、span要素が交互に計7つ入っています。

上記の2種類の疑似クラスで、「p:nth-child(3)」、「p:nth-of-type(3)」と、同じようにp要素の3番目を選択しています。「p:nth-child(3)」では、すべての子要素の3番目がp要素ならCSSを適用、p要素でないなら何もしません。この例の場合、p要素なので、CSSを適用し、背景を水色にしています。

「p:nth-of-type(3)」では、他の要素に関係なく、p要素の3番目にCSSを適用し、背景をピンクにしています。

サンプル（１）CSSソース

.sample01 p:nth-child(3)   {	
	background: #cdf;
	}
.sample01 p:nth-of-type(3)   {	
	background: pink;
	}

サンプル（１）

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

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

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

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

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

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

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

サンプル（２）は、サンプル（１）のhtml、CSSをそのまま使い、疑似クラスの「p」部分のみ、全称セレクタ「*」に変更しています。

疑似クラスは、「*:nth-child(3)」と「*:nth-of-type(3)」と指定して、サンプル（１）と同様にそれぞれ3番目を選択しています。「*:nth-child(3)」では、全ての要素の合わせて先頭から3番目の要素、画面上では2番目のp要素の背景を緑色にしています。

*:nth-of-type(3)では、全ての要素（この例では、p要素とspan要素）のそれぞれの3番目の要素、画面上では3番目のp要素と3番目のspan要素の二つの背景を黄色にしています。

なお、全称セレクタ「*」はできます。この部分に何も書かず、「.sample02 :nth-of-type(3)」のようにしても同じ意味になります。

サンプル（２）CSSソース

.sample02 *:nth-child(3) {
	background: #af9;
	}
.sample02 *:nth-of-type(3) {
	background: #fe9;
	}