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: CSS 선택자
slug: Web/CSS/CSS_Selectors
tags:
- CSS
- Guide
- Overview
- Reference
- Selectors
- 선택자
translation_of: Web/CSS/CSS_Selectors
---
<div>{{CSSRef("Selectors")}}</div>
<p class="summary"><span class="seoSummary"><strong>CSS 선택자</strong>는 CSS 규칙을 적용할 요소를 정의합니다.</span></p>
<div class="blockIndicator note">
<p><strong>참고</strong>: 부모, 부모의 형제, 부모 형제의 자식을 선택할 수 있는 선택자는 존재하지 않습니다.</p>
</div>
<h2 id="기본_선택자">기본 선택자</h2>
<dl>
<dt><a href="/ko/docs/Web/CSS/Universal_selectors">전체 선택자</a></dt>
<dd>모든 요소를 선택합니다. 추가로 네임스페이스 제한을 둘 수 있습니다.<br>
<strong>구문:</strong> <code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br>
<strong>예제:</strong> <code>*</code>은 문서 내의 모든 요소와 일치합니다.</dd>
<dt><a href="/ko/docs/Web/CSS/Type_selectors">유형 선택자</a></dt>
<dd>주어진 노드 이름을 가진 모든 요소를 선택합니다.<br>
<strong>구문:</strong> <code><var>elementname</var></code><br>
<strong>예제:</strong> <code>input</code>은 모든 {{HTMLElement("input")}} 요소와 일치합니다.</dd>
<dt><a href="/ko/docs/Web/CSS/Class_selectors">클래스 선택자</a></dt>
<dd>주어진 <code>class</code> 특성을 가진 모든 요소를 선택합니다.<br>
<strong>구문:</strong> <code>.<var>classname</var></code><br>
<strong>예제:</strong> <code>.index</code>는 "index" 클래스를 가진 모든 요소와 일치합니다.</dd>
<dt><a href="/ko/docs/Web/CSS/ID_selectors">ID 선택자</a></dt>
<dd><code>id</code> 특성에 따라 요소를 선택합니다. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 합니다.<br>
<strong>구문:</strong> <code>#<var>idname</var></code><br>
<strong>예제:</strong> <code>#toc</code>는 "toc" ID를 가진 요소와 일치합니다.</dd>
<dt><a href="/ko/docs/Web/CSS/Attribute_selectors">특성 선택자</a></dt>
<dd>주어진 특성을 가진 모든 요소를 선택합니다.<br>
<strong>구문:</strong> <code>[<var>attr</var>]</code> <code>[<var>attr</var>=<var>value</var>]</code> <code>[<var>attr</var>~=<var>value</var>]</code> <code>[<var>attr</var>|=<var>value</var>]</code> <code>[<var>attr</var>^=<var>value</var>]</code> <code>[<var>attr</var>$=<var>value</var>]</code> <code>[<var>attr</var>*=<var>value</var>]</code><br>
<strong>예제:</strong> <code>[autoplay]</code>는 <code>autoplay</code> 특성을 설정한 모든 요소와 일치합니다. 특성의 값은 고려하지 않습니다.</dd>
</dl>
<h2 id="그룹_선택자">그룹 선택자</h2>
<dl>
<dt><a href="/ko/docs/Web/CSS/Selector_list">선택자 목록</a></dt>
<dd><code>,</code>는 선택자 그룹을 생성하는 방법으로, 모든 일치하는 노드를 선택합니다.<br>
<strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var>, <var>B</var></code><br>
<strong>예제:</strong> <code>div, span</code>은 모든 {{HTMLElement("span")}}과 {{HTMLElement("div")}} 요소와 일치합니다.</dd>
</dl>
<h2 id="결합자">결합자</h2>
<dl>
<dt><a href="/ko/docs/Web/CSS/Descendant_combinator">자손 결합자</a></dt>
<dd><code> </code> (공백) 결합자는 첫 번째 요소의 자손인 노드를 선택합니다.<br>
<strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var> <var>B</var></code><br>
<strong>예제:</strong> <code>div span</code>은 {{HTMLElement("div")}} 요소 안에 위치하는 모든 {{HTMLElement("span")}} 요소와 일치합니다.</dd>
<dt><a href="/ko/docs/Web/CSS/Child_combinator">자식 결합자</a></dt>
<dd><code>></code> 결합자는 첫 번째 요소의 바로 아래 자식인 노드를 선택합니다.<br>
<strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var> > <var>B</var></code><br>
<strong>예제:</strong> <code>ul > li</code>는 {{HTMLElement("ul")}} 요소 바로 아래에 위치하는 모든 {{HTMLElement("li")}} 요소와 일치합니다.</dd>
<dt><a href="/ko/docs/Web/CSS/General_sibling_combinator">일반 형제 결합자</a></dt>
<dd><code>~</code> 결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.<br>
<strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var> ~ <var>B</var></code><br>
<strong>예제:</strong> <code>p ~ span</code>은 {{HTMLElement("p")}} 요소를 뒤따르는 모든 {{HTMLElement("span")}} 요소와 일치합니다.</dd>
<dt><a href="/ko/docs/Web/CSS/Adjacent_sibling_combinator">인접 형제 결합자</a></dt>
<dd><code>+</code> 결합자는 인접 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.<br>
<strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var> + <var>B</var></code><br>
<strong>예제:</strong> <code>h2 + p</code>는 {{HTMLElement("h2")}} 바로 뒤에 위치하는 {{HTMLElement("p")}} 요소와 일치합니다.</dd>
<dt><a href="/ko/docs/Web/CSS/Column_combinator">열 결합자</a> {{Experimental_Inline}}</dt>
<dd><code>||</code> 결합자는 같은 열에 속하는 노드를 선택합니다.<br>
<strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var> || <var>B</var></code><br>
<strong>예제:</strong> <code>col || td</code>는 {{HTMLElement("col")}}의 범위에 속하는 모든 {{HTMLElement("td")}} 요소와 일치합니다.</dd>
</dl>
<h2 id="의사_클래스요소">의사 클래스/요소</h2>
<dl>
<dt><a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a></dt>
<dd>의사 <code>:</code>은 문서 트리가 포함하지 않는 상태 정보에 기반해 요소를 선택할 수 있습니다.<br>
<strong>예제:</strong> <code>a:visited</code>는 사용자가 방문한 모든 {{HTMLElement("a")}} 요소와 일치합니다.</dd>
<dt><a href="/en-US/docs/Web/CSS/Pseudo-elements">의사 요소</a></dt>
<dd>의사 <code>::</code>는 HTML이 포함하지 않는 개체를 선택합니다.<br>
<strong>예제:</strong> <code>p::first-line</code>은 모든 {{HTMLElement("p")}} 요소의 첫 번째 줄과 일치합니다.</dd>
</dl>
<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")}}</td>
<td>{{Spec2("CSS4 Selectors")}}</td>
<td>Added the <code>||</code> column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Selectors")}}</td>
<td>{{Spec2("CSS3 Selectors")}}</td>
<td>Added the <code>~</code> general sibling combinator and tree-structural pseudo-classes.<br>
Made pseudo-elements use a <code>::</code> double-colon prefix. Additional attribute selectors</td>
</tr>
<tr>
<td>{{SpecName("CSS2.1", "selector.html")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td>Added the <code>></code> child and <code>+</code> adjacent sibling combinators.<br>
Added the <strong>universal</strong> and <strong>attribute</strong> selectors.</td>
</tr>
<tr>
<td>{{SpecName("CSS1")}}</td>
<td>{{Spec2("CSS1")}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<p><a href="/ko/docs/Web/CSS/Pseudo-classes#명세">의사 클래스</a>와 <a href="/ko/docs/Web/CSS/Pseudo-elements#명세">의사 요소</a>의 명세 표에서 각각의 상세 정보를 볼 수 있습니다.</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><a href="/ko/docs/Web/CSS/Specificity">CSS 명시도</a></li>
</ul>
|
