1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
|
---
title: ':nth-child()'
slug: 'Web/CSS/:nth-child'
tags:
- CSS
- Reference
- Selectors
- Web
- セレクター
- 擬似クラス
translation_of: 'Web/CSS/:nth-child'
---
<div>{{CSSRef}}</div>
<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:nth-child()</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>は、兄弟要素のグループの中での位置に基づいて選択します。</p>
<pre class="brush: css no-line-numbers">/* リスト中の2番目の <li> 要素を選択 */
li:nth-child(2) {
color: lime;
}
/* 兄弟要素の中で3つおきに
要素を選択 */
:nth-child(4n) {
color: lime;
}
</pre>
<h2 id="Syntax" name="Syntax">構文</h2>
<p><code>nth-child</code> 擬似クラスは、引数を1つ指定し、リストの子要素を要素の位置で選択するためのパターンを記述します。要素の位置は1から始まります。</p>
<h3 id="Keyword_values" name="Keyword_values">キーワード値</h3>
<dl>
<dt><code>odd</code></dt>
<dd>一連の兄弟要素の中で奇数番目の要素 (1, 3, 5, など) を表します。</dd>
<dt><code>even</code></dt>
<dd>一連の兄弟要素の中で偶数番目の要素 (2, 4, 6, など) を表します。</dd>
</dl>
<h3 id="Functional_notation" name="Functional_notation">関数表記</h3>
<dl>
<dt><code><An+B></code></dt>
<dd>リスト中の位置が、 <code>An+B</code> で定義された数値のパターンと一致する要素を表します。<br>
<code>A</code> は整数の刻み値です。<br>
<code>B</code> は整数の加算値です。<br>
<code>n</code> はすべての正の整数で、0から始まります。</dd>
<dd>リスト中の <em>An+B</em> 番目の要素として読むことができます。</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Example_selectors" name="Example_selectors">セレクターの例</h3>
<dl>
<dt><code>tr:nth-child(odd)</code> 又は <code>tr:nth-child(2n+1)</code></dt>
<dd>HTML テーブルの奇数行 (1, 3, 5, など) を表します。</dd>
<dt><code>tr:nth-child(even)</code> または <code>tr:nth-child(2n)</code></dt>
<dd>HTML テーブルの偶数行 (2, 4, 6, など) を表します。</dd>
<dt><code>:nth-child(7)</code></dt>
<dd>7番目の要素を表します。</dd>
<dt><code>:nth-child(5n)</code></dt>
<dd><strong>5</strong>番目 [=5×1], <strong>10</strong>番目 [=5×2], <strong>15</strong>番目 [=5×3], <strong>等</strong>の要素を表します。最初のものは <strong>0</strong>番目 [=5x0] が式の結果として返りますが、 <code>n</code> が0から始まるのに対して添字は1から始まるので、一致するものはないという結果になります。これは最初は奇妙に見えるかもしれませんが、次の例のように <code>B</code> の部分が <code>>0</code> となる場合にもっとよく分かるでしょう。</dd>
<dt><code>:nth-child(n+7)</code></dt>
<dd>7番目とそれ以降のすべての要素を表します。 <strong>7</strong>番目 [=0+7], <strong>8</strong>番目 [=1+7], <strong>9</strong>番目 [=2+7], <strong>等</strong>です。</dd>
<dt><code>:nth-child(3n+4)</code></dt>
<dd><strong>4</strong>番目 [=(3×0)+4], <strong>7</strong>番目 [=(3×1)+4], <strong>10</strong>番目 [=(3×2)+4], <strong>13</strong>番目 [=(3×3)+4], <strong>等</strong>の要素を表します。</dd>
<dt><code>:nth-child(-n+3)</code></dt>
<dd>兄弟要素のグループの中で最初の3つの要素を表します。 [=-0+3, -1+3, -2+3]</dd>
<dt><code>p:nth-child(n)</code></dt>
<dd>兄弟要素のグループの中ですべての <code><p></code> 要素を表します。これは単純な <code>p</code> セレクターと同じ要素を選択します (但し、具体度はより高くなります)。</dd>
<dt><code>p:nth-child(1)</code> または <code>p:nth-child(0n+1)</code></dt>
<dd>兄弟要素のグループの中で最初の <code><p></code> 要素すべてを表します。これは {{cssxref(":first-child")}} セレクターと同じです (具体度も同じです)。</dd>
</dl>
<dl>
<dt><code>p:nth-child(n+8):nth-child(-n+15)</code></dt>
<dd>兄弟要素のグループの中で8～15番目の <code><p></code> 要素を表します。</dd>
</dl>
<h3 id="Detailed_example" name="Detailed_example">詳細な例</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush:html"><h3><code>span:nth-child(2n+1)</code>, WITHOUT an
<code>&lt;em&gt;</code> among the child elements.</h3>
<p>Children 1, 3, 5, and 7 are selected.</p>
<div class="first">
<span>Span 1!</span>
<span>Span 2</span>
<span>Span 3!</span>
<span>Span 4</span>
<span>Span 5!</span>
<span>Span 6</span>
<span>Span 7!</span>
</div>
<br>
<h3><code>span:nth-child(2n+1)</code>, WITH an
<code>&lt;em&gt;</code> among the child elements.</h3>
<p>Children 1, 5, and 7 are selected.<br>
3 is used in the counting because it is a child, but it isn't
selected because it isn't a <code>&lt;span&gt;</code>.</p>
<div class="second">
<span>Span!</span>
<span>Span</span>
<em>This is an `em`.</em>
<span>Span</span>
<span>Span!</span>
<span>Span</span>
<span>Span!</span>
<span>Span</span>
</div>
<br>
<h3><code>span:nth-of-type(2n+1)</code>, WITH an
<code>&lt;em&gt;</code> among the child elements.</h3>
<p>Children 1, 4, 6, and 8 are selected.<br>
3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>,
not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
children of that type. The <code>&lt;em&gt;</code> is completely skipped
over and ignored.</p>
<div class="third">
<span>Span!</span>
<span>Span</span>
<em>This is an `em`.</em>
<span>Span!</span>
<span>Span</span>
<span>Span!</span>
<span>Span</span>
<span>Span!</span>
</div>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">html {
font-family: sans-serif;
}
span,
div em {
padding: 5px;
border: 1px solid green;
display: inline-block;
margin-bottom: 3px;
}
.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
background-color: lime;
}</pre>
<h4 id="Result" name="Result">結果</h4>
<p>{{EmbedLiveSample('Detailed_example', 550, 550)}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td><code><selector></code> の構文と仕様書に、親を持たない要素も一致するよう追加。</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>初回定義。</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div>
<p>{{Compat("css.selectors.nth-child")}}</p>
</div>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}</li>
</ul>
|
