CSS :nth-of-type() 仮類

定義と用法

CSS :nth-of-type(n) pseudo-classは、親要素の中で同じタイプ（タグ名）の n の各要素を選択できます。

n 数字/インデックス、キーワード（odd または even）または公式（例えば an + b）

ヒント：参照 :nth-child() pseudo-classは、親要素の中で n の要素を選択できます、そのタイプはどちらでもかまいません。

例

例1

使い方 :nth-of-type() 選択子：

/* div兄弟要素の2番目の要素を選択 */
div:nth-of-type(2) {
  background: red;
}
/* リストの2番目のli要素を選択 */
li:nth-of-type(2) {
  background: lightgreen;
}
/* 兄弟要素グループの各3番目の要素を選択 */
:nth-of-type(3) {
  background: yellow;
}

実際に試してみてください

例2

odd および even キーワードで、奇数または偶数のインデックスを持つ子要素をマッチングするために使用できます（最初の子要素のインデックスは1です）。

ここでは、奇数索引と偶数索引の<p>要素に異なる背景色を指定しています：

p:nth-of-type(odd) {
  background: red;
}
p:nth-of-type(even) {
  background: blue;
}

実際に試してみてください

例3

以下の公式を使用して（an + b説明：a 整数ステップを示し、nは0から始まるすべての非負整数です、b 整数オフセットです。

ここでは、索引が3の倍数のすべての<p>要素に背景色を指定しています（3番目、6番目、9番目などの要素を選択します）：

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

実際に試してみてください

例4

ここでは、索引が3の倍数のすべての<p>要素に背景色を指定しています。その後、1を引きます（2番目、5番目、8番目などの要素を選択します）：

p:nth-of-type(3n-1) {
  background: red;
}

実際に試してみてください

CSS文法

:nth-of-type(index |奇数|偶数| an+b) {
  css宣言;
}

技術的詳細

ブラウザのサポート

テーブル内の数字は、そのパseudo-classを完全にサポートする最初のブラウザのバージョンを指定しています。