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以降でないと正常に表示されないので注意が必要だ。