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
|
---
title: ':nth-child'
slug: 'Web/CSS/:nth-child'
tags:
- CSS
- Layout
- Pseudo-class
- Reference
- Web
translation_of: 'Web/CSS/:nth-child'
---
<div>{{CSSRef}}</div>
<p><a href="/ko/docs/Web/CSS" title="CSS">CSS</a> <strong><code>:nth-child()</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 형제 사이에서의 순서에 따라 요소를 선택합니다.</p>
<pre class="brush: css no-line-numbers">/* 목록의 두 번째 <li> 선택 */
li:nth-child(2) {
color: lime;
}
/* 임의의 그룹에서 네 번째에 위치하는 모든 요소 선택 */
:nth-child(4n) {
color: lime;
}
</pre>
<h2 id="Syntax" name="Syntax">구문</h2>
<p><code>nth-child</code> 의사 클래스는 형제의 목록에서, 선택하려는 요소의 인덱스 패턴을 나타내는 하나의 매개변수를 사용해 지정합니다. 인덱스는 1부터 시작합니다.</p>
<h3 id="키워드_값">키워드 값</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="함수형_표기법">함수형 표기법</h3>
<dl>
<dt><code><An+B></code></dt>
<dd>사용자 지정 패턴을 만족한 인덱스를 가지는 요소를 나타냅니다. An+B의 형태로 나타내며,<br>
<code>A</code>는 정수 인덱스 증감량,<br>
<code>B</code>는 정수 오프셋,<br>
<code>n</code>은 0부터 시작하는 모든 양의 정수를 나타냅니다.</dd>
<dd>목록의 <em>An+B</em>번째 요소라고 해석할 수 있습니다.</dd>
</dl>
<h3 id="형식_구문">형식 구문</h3>
<pre class="syntaxbox">{{csssyntax}}
</pre>
<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 표의 홀수번째 행을 나타냅니다.</dd>
<dt><code>tr:nth-child(even)</code> 또는 <code>tr:nth-child(2n)</code></dt>
<dd>HTML 표의 짝수번째 행을 나타냅니다.</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]으로서 아무 요소도 선택하지 않는데, 요소의 인덱스는 1부터 시작하지만 <code>n</code>은 0부터 증가하기 때문입니다. 다소 의아할 수 있으나, 바로 아래 예제처럼 공식의 B 부분이 >0인 경우 보다 납득하기 쉬워집니다.</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>앞에서 세 개의 요소를 나타냅니다. [=-0+3, -1+3, -2+3]</dd>
<dt><code>p:nth-child(n)</code></dt>
<dd>형제 그룹 내의 모든 <code><p></code> 요소를 나타냅니다. 단순한 <code>p</code> 선택자와 동일하지만 더 높은 <a href="/ko/docs/Web/CSS/Specificity">명시도</a>를 가집니다.</dd>
<dt><code>p:nth-child(1)</code> 또는 <code>p:nth-child(0n+1)</code></dt>
<dd>형제 그룹 내의 모든 첫 번째 <code><p></code> 요소를 나타냅니다. {{cssxref(":first-child")}} 선택자와 동일하며 같은 <a href="/ko/docs/Web/CSS/Specificity">명시도</a>를 가집니다.</dd>
<dt><code>p:nth-child(n+8):nth-child(-n+15)</code></dt>
<dd>형제 그룹 내에서 8번째부터 15번째 까지의 <code><p></code> 요소를 나타냅니다.</dd>
</dl>
<h3 id="자세한_예제">자세한 예제</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="결과">결과</h4>
<div>{{EmbedLiveSample('자세한_예제', 550, 550)}}</div>
<h2 id="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Adds <code>of <selector></code> syntax and specifies that matching elements are not required to have a parent.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("css.selectors.nth-child")}}</p>
<h2 id="See_also" name="See_also">같이 보기</h2>
<ul>
<li>{{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}</li>
</ul>
|
