---
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>&gt;</code> 결합자는 첫 번째 요소의 바로 아래 자식인 노드를 선택합니다.<br>
 <strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var> &gt; <var>B</var></code><br>
 <strong>예제:</strong> <code>ul &gt; 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>&gt;</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>