CSS3セレクタnth-childとnth-of-type

CSS3から追加されたセレクタのnth-childとnth-of-typeのプロパティ。

■nth-childとは

.Parents .Child:nth-child(n)

と記述する上記の例では、Parentsクラス親要素内の子要素でn番目のChildクラスのみを指定することができる。
リストアイテムなどの何番目だけborderを指定したいとか、背景色を変更したい場合などに便利です。

別の表現をするとノードでの指定といったところでしょうか。

■nth-of-typeとは

.Present .Child:nth-of-type(n)

親要素内で子要素内のChildクラスのみ対象のn番目を指定します。

nth-childとnth-of-typeとの違いはすこしわかりずらいが、nth-childは子要素内の順番を指定して、タグやクラスが合致していた場合、反映される。

nth-of-typeの場合は、子要素の指定されたタグやクラスのみを対象に数えてn番目にあたるものが対象となる。

ちなみにIE8では未対応部分がほとんどなので、IE9以降でないと正常に表示されないので注意が必要だ。