CSSのnth-childとnth-of-typeの違い

2015年06月22日

CSS3から使うことが出来る便利な書き方として

nth-child　と　nth-of-type

があります。

これは、特定の要素の数を指定して、そこにだけスタイルを適用することができるというものです。

例えば

div.box li:nth-child(3n)　{
　　　　スタイル
}

の場合、クラス「box」の中の、liの要素の３の倍数の要素にスタイルが適用されます。

一方

div.box li:nth-of-type(3n)　{
　　　　スタイル
}

この場合も同様です。

しかし、この２つで何が違うかというと、

nth-child

の場合は、途中に何か他の要素が入っても、それもカウントします。

一方で、nth-of-typeの場合は途中に何か他の要素が入る場合、それをカウントせずに指定した要素のみをカウントします。

この違いを理解することで状況に応じてあったほうを使い分けることができます。