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

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

■nth-childとは

.Parents .Child:nth-child(n)

と記述する上記の例では、.......を指定することができる。
リストアイテムなどの何番目だけborderを指定したいとか、背景色を変更したい場合などに便利です。

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

■nth-of-typeとは

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

親要素内で子要素内の........が合致していた場合、反映される。

nth-of-typeの場合は...............ものが対象となる。

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