Blog

CSS3の:nth-child(n)と:nth-of-type(n)

2014.10.14Cat:css3 html5 デザイナー

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)があります。

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

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

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ