---
title: ID 선택자
slug: Web/CSS/ID_selectors
tags:
  - CSS
  - Reference
  - Selectors
  - 선택자
translation_of: Web/CSS/ID_selectors
---
<div>{{CSSRef}}</div>

<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>ID 선택자</strong>는 요소의 {{htmlattrxref("id")}} 특성 값을 비교하여, 완전히 동일한 <code>id</code>를 가진 요소를 선택합니다.</p>

<pre class="brush: css no-line-numbers notranslate">/* id="demo" 요소 선택 */
#demo {
  border: red 2px solid;
}</pre>

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

<pre class="syntaxbox notranslate">#id_value { <em>style properties</em> }</pre>

<p>위의 구문은 <a href="/ko/docs/Web/CSS/Attribute_selectors">특성 선택자</a>를 사용한 다음 구문과 동일합니다.</p>

<pre class="syntaxbox notranslate">[id=id_value] { <em>style properties</em> }</pre>

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

<h3 id="CSS">CSS</h3>

<pre class="brush: css notranslate">#identified {
  background-color: skyblue;
}
</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;div id="identified"&gt;특별한 ID를 가진 요소에요!&lt;/div&gt;
&lt;div&gt;이건 그냥 div에요.&lt;/div&gt;
</pre>

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

<p>{{EmbedLiveSample("Example", '100%', 50)}}</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", "#id-selectors", "ID selectors")}}</td>
   <td>{{Spec2("CSS4 Selectors")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}</td>
   <td>{{Spec2("CSS3 Selectors")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}</td>
   <td>{{Spec2("CSS2.1")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}</td>
   <td>{{Spec2("CSS1")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

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



<p>{{Compat("css.selectors.id")}}</p>