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

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

サンプル(1)CSSソース

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

サンプル(1)

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

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

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

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

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

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

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

 

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

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

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

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

サンプル(2)CSSソース

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

サンプル(2)

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

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

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

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

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

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

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

戻るボタン