CSS3 :nth-child()セレクター
CSSセレクター完全リファレンス定義と使い方
:nth-child(n) セレクターは、親要素の n 番目の子要素にマッチします。要素の型に制限はありません。
n数値、キーワード、または数式を使用できます。
ヒント：参照してくださいセレクター。このセレクターは、同じ型の n 番目の兄弟要素にマッチします。
構文
element:nth-child(n)
elementは選択したい HTML 要素です。nはパラメータで、キーワード（例：odd或even）、または式（例：2n+1）。
キーワード odd と even
odd奇数位置の子要素を選択します。even偶数位置の子要素を選択します。
ブラウザサポート
表内の数字は、そのセレクターをサポートする最初のブラウザバージョンを示します。
| セレクター | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
その他の例
例 1
odd と even はキーワードとして使用でき、インデックスが奇数または偶数である子要素にマッチします（最初の子要素のインデックスは1です）。 ここでは、奇数および偶数の p 要素に2つの異なる背景色を指定します：
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
試してみる »
例 2
数式（an+ b）を使用します。説明：a はループのサイズを表し、N はカウンター（0から始まる）、b はオフセットです。 ここでは、インデックスが3の倍数であるすべての p 要素に背景色を指定します：
p:nth-child(3n+0)
{
background:#ff0000;
}
試してみる »
その他の拡張