もっと"Try it Yourself"以下の例。
定義と使用法
:nth-child( n )セレクタがあるすべての要素と一致するn 、その親の、種類に関係なく、子目を。
n数、キーワード、または式とすることができます。
Tip:を見てn番目の-の型（）：ある要素を選択するセレクタn子番目の、 of a particular type 、その親のを。
| バージョン： | CSS3 |
|---|
ブラウザのサポート
表中の数字は完全にセレクタをサポートする最初のブラウザのバージョンを指定します。
| セレクタ | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSSの構文
その他の例
例
インデックスが偶数奇数であるかの子要素と一致するために使用することができ、奇数と偶数のキーワード(the index of the first child is 1)
ここでは、奇数と偶数のp要素のための2つの異なる背景色を指定します。
p:nth-child(odd)
{
background: #ff0000;
}
p:nth-child(even)
{
background: #0000ff;
}
»それを自分で試してみてください 例
式を用いて( an + b ) 。 説明：周期のサイズを表し、 a nカウンタであり、 (starts at 0) 、そしてbオフセット値です。
ここでは、インデックス3の倍数であるすべてのp要素の背景色を指定します。
p:nth-child(3n+0)
{
background: #ff0000;
}
»それを自分で試してみてください