files/ko/web/css/_colon_first-child/index.html


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

---
title: ':first-child'
slug: 'Web/CSS/:first-child'
tags:
  - CSS
  - Layout
  - Pseudo-class
  - Reference
  - Web
translation_of: 'Web/CSS/:first-child'
---
<div>{{CSSRef}}</div>

<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:first-child</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 형제 요소 중 제일 첫 요소를 나타냅니다.</p>

<pre class="brush: css no-line-numbers notranslate">/* Selects any &lt;p&gt; that is the first element
   among its siblings */
p:first-child {
  color: lime;
}</pre>

<div class="note">
<p><strong>참고</strong>: 초기 정의에서는 부모가 있는 요소만 선택할 수 있었습니다. Selectors Level 4부터는 이 제한이 사라졌습니다.</p>
</div>

<h2 id="구문">구문</h2>

{{csssyntax}}

<h2 id="예제">예제</h2>

<h3 id="기본_예제">기본 예제</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;div&gt;
  &lt;p&gt;This text is selected!&lt;/p&gt;
  &lt;p&gt;This text isn't selected.&lt;/p&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;h2&gt;This text isn't selected: it's not a `p`.&lt;/h2&gt;
  &lt;p&gt;This text isn't selected.&lt;/p&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
</pre>

<h4 id="결과">결과</h4>

<p><span>{{EmbedLiveSample('기본_예제', 500, 200)}}</span></p>

<h3 id="목록_스타일링">목록 스타일링</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;ul&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
  &lt;li&gt;Item 3
    &lt;ul&gt;
      &lt;li&gt;Item 3.1&lt;/li&gt;
      &lt;li&gt;Item 3.2&lt;/li&gt;
      &lt;li&gt;Item 3.3&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css notranslate">ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}</pre>

<h4 id="결과_2">결과</h4>

<p>{{EmbedLiveSample('목록_스타일링')}}</p>

<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', '#first-child-pseudo', ':first-child')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>Matching elements are not required to have a parent.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td>No change.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>


<p>{{Compat("css.selectors.first-child")}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li>{{CSSxRef(":-moz-first-node")}} {{Non-standard_Inline}}</li>
 <li>{{CSSxRef(":first-of-type")}}</li>
 <li>{{CSSxRef(":last-child")}}</li>
 <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
</ul>