CSS2では、:first-childを使って最初の要素を選択することができますが、

CSS3では、:nth-child(n)を使って、特定の順番にある要素を選択することができます。

ただ、この:nth-child(n)は指定した要素の親要素からみた子要素が、要素の種類(タイプ)に関係なくカウントの対象となるため、

例えば

このようなHTMLで2番目の<p>を選択したいと思って、

「p:nth-child(2)」

としてしまった場合、pの親要素である<div>の子要素にはpの前に<h2>と<h3>があり、

この親要素の<div>の2番目の子要素はh3になるので、

p:nth-child(2)という要素は存在しないことになり、この指定は無効になってしまいます。

 

そのため、2番目の要素の<p>を選ぶ場合は、

「p:nth-child(4)」

としなければならず、少しわかりづらいだけでなく、以後の更新作業において要素の位置がずれてしまい、

意図しない崩れが起きてしまう可能性も出てきてしまします。

 

こんな場合に便利なのが、nth-childと同様にCSS3で使うことができるようになった、nth-of-typeです。

nth-of-typeでは、先ほどと同じ

のようはHTMLにおいて、

「p:nth-of-type(2)」

と指定した場合、<p>以外の要素が同じ親要素内に子要素として存在する場合でも、それらはカウントされず、

指定した要素と同じタイプの要素だけを対象にカウントが行われるため、

2番目にある<p>を選択することができます。

 

DEMO

 

ちなみにこの:nth-of-typeは:nth-childと同じく、スマホのブラウザやChrome, FIreFox, Opera, IE9以上のブラウザで利用できます。

:nth-of-type(n)の類似の要素として、:first-of-type、:last-of-type、:nth-last-of-type(n)があります。

特定の種類の要素を対象にカウントするか、種類に関係なくカウントするかで、

使い分けするといいと思います。