CSS :nth-child() 仮類

定義と用法

CSS :nth-child(n)}} のパseudoクラスは、その親要素の第 n の

このパseudoクラスは、その親要素の子リスト内のインデックスに基づいて要素を一致させるために使用されます。

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

ヒント：参照 :nth-of-type() のパseudoクラスは、その親要素の中でその子リストのインデックスに基づいて要素を選択するために使用されます。同类型（タグ名）の n の同类型（タグ名）の子要素の要素。

例

例1

使い方 :nth-child() パseudoクラス：

/* 任何兄弟元素组中的每第四个元素 */
:nth-child(4) {
  background-color: yellow;
}
/* div兄弟要素の2番目の要素を選択 */
div:nth-child(2) {
  background-color: red;
}
/* リストの2番目のli要素を選択 */
li:nth-child(2) {
  background-color: lightgreen;
}

自分で試してみる

例2

odd および even キーワードであり、奇数または偶数のインデックスを持つ子要素に一致できます（最初の子要素のインデックスは1です）。

ここでは、奇数インデックスと偶数インデックスの<p>要素に異なる背景色を指定しています：

p:nth-child(odd) {
  background-color: red;
}
p:nth-child(even) {
  background: lightgreen;
}

自分で試してみる

例3

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

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

p:nth-child(3n+1) {
  background-color: red;
}

自分で試してみる

例4

ここでは、インデックスが3の倍数のすべての<p>要素に背景色を指定しています。その後、1を引きます（最初の、4番目の、7番目のなどの要素を選択します）：

p:nth-child(3n-1) {
  background-color: red;
}

自分で試してみる

CSS文法

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

技術的詳細

ブラウザのサポート

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