English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-child(an+b) このCSSパseudo-classはまずすべての現在の要素の兄弟要素を探し出し、その位置の順序に従って1始めます、選択された結果はCSSパseudo-class:nth-child括号内の式（an+b）マッチングした要素集合（n=0、1、2、3...）。例：
0n+3 または単純に 3 が3番目の要素をマッチングします。
1n+0または単純にnがすべての要素をマッチングします。（互換性の注意：Androidブラウザ 4.3 以下のバージョンでは、nと 1nのマッチング方法が異なります。1nと 1n+0は一致しており、好みに応じてどちらかを使用することができます。）
2n+0または単純に 2nが位置をマッチングします。 2、4、6、8...の要素（n=0の場合、2n+0=0、第0個の要素は存在しません。なぜなら、1始めます）。evenというキーワードを使用してこの表現を置き換えることができます。
2n+1 位置が 1、3、5、7...の要素をマッチングします。oddというキーワードを使用してこの表現を置き換えることができます。
3n+4 位置が 4、7、10、13...の要素。...の要素（n=0の場合、
aとbはどちらも整数でなければならず、要素の最初の子要素のインデックスは 1。言い換えれば、このパseudo-classは集合 { an + b; n = 0, 1, 2, ...}内の子要素。また、特に注意が必要なのは、anはbの前に書かれ、bの前に書かれないことです。+anの形式で指定します。
各p要素がマッチングする親要素内の第 2 個の子要素の背景色：
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>基本チュートリアル(oldtoolbag.com)</title>
<style>
p:nth-child(2)
{
background:orange;
}
</style>
</head>
<body>
<h1>これはタイトル</h1>
<p>これは第一の段落。</p>
<p>これは第二の段落。</p>
<p>これは第三の段落。</p>
<p>これは第四の段落。</p>
<p><b>注意:</b>/b> Internet Explorer 8 およびより古いバージョンのブラウザでは:nthをサポートしていません-child()選択子.</p>
</body>
</html>テストを見てみる ‹/›:nth-child(n)選択子は、親要素内の第n番目の子要素をマッチングします。要素の種類には制限はありません。
n 数字、キーワード、または公式のいずれかで構成できます。
ヒント: 参照してください選択子。この選択子は、同種の要素の中で第n番目の同级兄弟要素をマッチングします。
tr:nth-child(2n+1)
HTMLテーブルの奇数行を示す。
tr:nth-child(odd)
HTMLテーブルの奇数行を示す。
tr:nth-child(2n)
HTMLテーブルの偶数行を示す。
tr:nth-child(even)
HTMLテーブルの偶数行を示す。
span:nth-child(0n+1)
子要素の中で最初のspan要素を示す、:firstと一緒に-child 選択子は同じ効果です。
span:nth-child(1)
は、親要素の中で子要素が最初で名前がspanのタグが選択されることを示します
span:nth-child(-n+3)
最初の三つの子要素のspan要素をマッチします。
テーブルの数字は、その属性をサポートする最初のブラウザのバージョン番号を示します。
| 選択子 | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
奇数と偶数は、インデックスが奇数または偶数の（インデックスの最初の子ノードが）の子要素をマッチするキーワードとして使用できます1) ここでは、奇数と偶数のp要素に異なる背景色を指定します：
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>基本チュートリアル(oldtoolbag.com)</title>
<style>
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<h1>これはタイトル</h1>
<p>これは第一の段落。</p>
<p>これは第二の段落。</p>
<p>これは第三の段落。</p>
<p>これは第四の段落。</p>
<p><b>注意:</b>/b> Internet Explorer 8 およびより古いバージョンのブラウザでは:nthをサポートしていません-child()選択子.</p>
</body>
</html>テストを見てみる ‹/›公式（an+ b）.説明：aはループの大きさを表し、Nはカウンタ（0から始まる）で、bはオフセットです。 ここでは、すべての索引が3の倍数のp要素に背景色を指定します：
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>基本チュートリアル(oldtoolbag.com)</title>
<style>
p:nth-child(3n+0)
{
background:orange;
}
</style>
</head>
<body>
<h1>これはタイトル</h1>
<p>第一の段落。</p>
<p>第二の段落。</p>
<p>第三の段落。</p>
<p>第四の段落。</p>
<p>第五の段落。</p>
<p>第六の段落。</p>
<p>第七の段落。</p>
<p>第八の段落。</p>
<p>第九の段落。</p>
<p><b>注意:</b>/b> Internet Explorer 8 およびより古いバージョンのブラウザでは:nthをサポートしていません-child()選択子.</p>
</body>
</html>テストを見てみる ‹/›