CSS3 :nth-of-type() Selector

例

各 p 要素に、同じ型の中の2番目の兄弟要素に一致する背景色を指定します。

p:nth-of-type(2)
{
background:#ff0000;
}

:nth-of-type(n) セレクタは、同じ型の中で n 番目の兄弟要素にマッチします。

n には、数値、キーワード、または数式を指定できます。

ヒント:参照::nth-child()セレクタ。このセレクタは、親要素の中の n 番目の子要素にマッチします。Look at the:nth-child() 。

表内の数字は、そのプロパティをサポートする最初のブラウザバージョン番号を示します。

セレクタ
:nth-of-type()	4.0	9.0	3.5	3.2	9.6

奇数と偶数は、インデックスが奇数または偶数である子要素にマッチさせるためのキーワードとして使用できます（インデックスの最初の子ノードは1です）。

ここでは、奇数と偶数の p 要素に2つの異なる背景色を指定します。

p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}

公式（an + b）を使用します。説明：a はループのサイズを表し、n はカウンタ（0から始まる）、b はオフセットです。

ここでは、インデックスが3の倍数であるすべての p 要素に背景色を指定します。

p:nth-of-type(3n+0)
{
background:#ff0000;
}

その他の拡張