CSSの:nth-of-typeは擬似クラスの１つで兄弟要素のグループの中で、「その要素」のn番目の要素を表します。
「その要素」という部分は:nth-of-typeと一緒に定義される単純セレクターの事で、省略された場合はユニバーサルセレクタ(*）が設定されます。
:nth-of-typeには引数を一つ渡します。その引数は大きく分けて
:nth-of-type()の引数に渡すキーワードは次の2つを渡す事が出来ます。
:nth-of-type()の引数には「その要素」のn番目を表す整数や数式でパターンを渡す事でも指定が可能です。
例えば下記のように固定の表示順の番号の指定や、偶数・奇数、計算式を使ったn番目の指定方法が行えます。
/* 2番目のpタグ */
p.nth-of-type(2) {
}
/* 偶数のpタグ */
p:nth-of-type(2n) {
}
/* 奇数のpタグ */
p:nth-of-type(2n+1) {
}
/* 3n+2つまり（5 8, 11, ...番目）*/
p:nth-of-type(3n+2) {
}計算式としては下記の形を取ります。
An+B
上記のサンプルコードでは.sampleのクラスセレクタの中の:nth-of-type(odd)の要素つまり、h1要素やp要素やa要素などの各要素で、奇数番目に登場する要素のテキストの色を青に設定しています。
つまりh1要素では、一番最初と3番目のh1要素の色が青になります。
上記のサンプルコードではまずp:nth-of-type(1)で最初に登場するp要素に対して色を赤に設定しています。
次にp:nth-of-type(2n)で偶数のp要素に対して色を青にしています。
※2nを「even」としても同じ結果です。
最後に少し複雑ですがp:nth-of-type(4n+5）で4n+5（nは0から始まる正の整数）の計算結果の表示順番号の要素に対して色を緑にしています。
:nth-of-typeはIE6-8では使えませんが、モダンなブラウザのほぼ全てで対応している疑似クラスです。:nth-of-typeの各ブラウザ毎の対応状況を確認したい方は下記よりご確認頂けます。