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
|
---
title: 의사 클래스
slug: Web/CSS/Pseudo-classes
tags:
- CSS
- Overview
- Pseudo-class
- Reference
- Selectors
translation_of: Web/CSS/Pseudo-classes
---
<div>{{CSSRef}}</div>
<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>의사 클래스</strong>(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 {{cssxref(":hover")}}를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있습니다.</p>
<pre class="brush: css notranslate">/* Any button over which the user's pointer is hovering */
button:hover {
color: blue;
}</pre>
<p>의사 클래스를 사용하면 문서 트리 콘텐츠와 관련된 경우 뿐만 아니라 탐색기 히스토리({{cssxref(":visited")}} 등), 콘텐츠의 상태(특정 폼 요소에 적용한 {{cssxref(":checked")}} 등), 마우스의 위치(커서가 마우스 위인지 아닌지 알 수 있는 {{cssxref(":hover")}} 등)처럼 외부 인자와 관련된 경우에도 스타일을 적용할 수 있습니다.</p>
<div class="blockIndicator note">
<p><strong>참고</strong>: <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>는 의사 클래스와 달리 요소의 <strong>특정 부분</strong>에 스타일을 적용할 때 사용합니다.</p>
</div>
<h2 id="구문">구문</h2>
<pre class="syntaxbox notranslate">selector:pseudo-class {
property: value;
}</pre>
<p>일반적인 클래스와 같이 여러 개의 의사 클래스를 조합해 복잡한 선택자를 만들 수 있습니다.</p>
<h2 id="표준_의사_클래스_색인">표준 의사 클래스 색인</h2>
<div class="index" id="index">
<ul>
<li>{{CSSxRef(":active")}}</li>
<li>{{CSSxRef(":any-link")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":checked")}}</li>
<li>{{CSSxRef(":current")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":default")}}</li>
<li>{{CSSxRef(":defined")}}</li>
<li>{{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":disabled")}}</li>
<li>{{CSSxRef(":drop")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":empty")}}</li>
<li>{{CSSxRef(":enabled")}}</li>
<li>{{CSSxRef(":first")}}</li>
<li>{{CSSxRef(":first-child")}}</li>
<li>{{CSSxRef(":first-of-type")}}</li>
<li>{{CSSxRef(":fullscreen")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":future")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":focus")}}</li>
<li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":focus-within")}}</li>
<li>{{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":host")}}</li>
<li>{{CSSxRef(":host()")}}</li>
<li>{{CSSxRef(":host-context()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":hover")}}</li>
<li>{{CSSxRef(":indeterminate")}}</li>
<li>{{CSSxRef(":in-range")}}</li>
<li>{{CSSxRef(":invalid")}}</li>
<li>{{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":lang", ":lang()")}}</li>
<li>{{CSSxRef(":last-child")}}</li>
<li>{{CSSxRef(":last-of-type")}}</li>
<li>{{CSSxRef(":left")}}</li>
<li>{{CSSxRef(":link")}}</li>
<li>{{CSSxRef(":local-link")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":not", ":not()")}}</li>
<li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
<li>{{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":nth-last-child", ":nth-last-child()")}}</li>
<li>{{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}</li>
<li>{{CSSxRef(":nth-of-type", ":nth-of-type()")}}</li>
<li>{{CSSxRef(":only-child")}}</li>
<li>{{CSSxRef(":only-of-type")}}</li>
<li>{{CSSxRef(":optional")}}</li>
<li>{{CSSxRef(":out-of-range")}}</li>
<li>{{CSSxRef(":past")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":read-only")}}</li>
<li>{{CSSxRef(":read-write")}}</li>
<li>{{CSSxRef(":required")}}</li>
<li>{{CSSxRef(":right")}}</li>
<li>{{CSSxRef(":root")}}</li>
<li>{{CSSxRef(":scope")}}</li>
<li>{{CSSxRef(":state", ":state()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":target")}}</li>
<li>{{CSSxRef(":target-within")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":user-invalid")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":valid")}}</li>
<li>{{CSSxRef(":visited")}}</li>
<li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}</li>
</ul>
</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("Fullscreen")}}</td>
<td>{{Spec2("Fullscreen")}}</td>
<td>Defined <code>:fullscreen</code>.</td>
</tr>
<tr>
<td>{{SpecName("HTML WHATWG", "#pseudo-classes")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>Defines when particular selectors match HTML elements.</td>
</tr>
<tr>
<td>{{SpecName("CSS4 Selectors")}}</td>
<td>{{Spec2("CSS4 Selectors")}}</td>
<td>Defined <code style="white-space: nowrap;">:any-link</code>, <code>:blank</code>, <code style="white-space: nowrap;">:local-link</code>, <code>:scope</code>, <code>:drop</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code style="white-space: nowrap;">:placeholder-shown</code>, <code style="white-space: nowrap;">:user-invalid</code>, <code style="white-space: nowrap;">:nth-col()</code>, <code style="white-space: nowrap;">:nth-last-col()</code>, <code>:is()</code> and <code>:where()</code>.<br>
Changed <code>:empty</code> to behave like {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.<br>
No significant change for other pseudo-classes defined in {{SpecName("CSS3 Selectors")}} and {{SpecName("HTML5 W3C")}} (though semantic meaning not taken over).</td>
</tr>
<tr>
<td>{{SpecName("HTML5 W3C")}}</td>
<td>{{Spec2("HTML5 W3C")}}</td>
<td>Copies the relevant section from the canonical (WHATWG) HTML spec.</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Basic UI")}}</td>
<td>{{Spec2("CSS3 Basic UI")}}</td>
<td>Defined <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code> and <code>:read-write</code>, but without the associated semantic meaning.</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Selectors")}}</td>
<td>{{Spec2("CSS3 Selectors")}}</td>
<td>Defined <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code> and <code>:not()</code>.<br>
Defined the syntax of <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, and <code>:indeterminate</code>, but without the associated semantic meaning.<br>
No significant change for pseudo-classes defined in {{SpecName('CSS2.1')}}.</td>
</tr>
<tr>
<td>{{SpecName("CSS2.1")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td>Defined <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, and <code>:focus</code>.<br>
No significant change for pseudo-classes defined in {{SpecName('CSS1')}}.</td>
</tr>
<tr>
<td>{{SpecName("CSS1")}}</td>
<td>{{Spec2("CSS1")}}</td>
<td>Defined <code>:link</code>, <code>:visited</code> and <code>:active</code>, but without the associated semantic meaning.</td>
</tr>
</tbody>
</table>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a></li>
</ul>
|
