path: root/files/ko/web/css/attribute_selectors/index.html

---
title: 특성 선택자
slug: Web/CSS/Attribute_selectors
tags:
  - CSS
  - Reference
  - Selectors
translation_of: Web/CSS/Attribute_selectors
---
<div>{{CSSRef("Selectors")}}</div>

<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>특성 선택자</strong>는 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택합니다.</p>

<pre class="brush: css no-line-numbers">/* &lt;a&gt; elements with a title attribute */
a[title] {
  color: purple;
}

/* &lt;a&gt; elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* &lt;a&gt; elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* &lt;a&gt; elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* &lt;a&gt; elements whose class attribute contains the word "logo" */
a[class~="logo"] {
  padding: 2px;
}</pre>

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

<dl>
 <dt><code>[<em>attr</em>]</code></dt>
 <dd><code>attr</code>이라는 이름의 특성을 가진 요소를 선택합니다.</dd>
 <dt><code>[<em>attr</em>=<em>value</em>]</code></dt>
 <dd><code>attr</code>이라는 이름의 특성값이 정확히 <code>value</code>인 요소를 선택합니다.</dd>
 <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt>
 <dd><code>attr</code>이라는 이름의 특성값이 정확히 <code>value</code>인 요소를 선택합니다. <code>attr</code> 특성은 공백으로 구분한 여러 개의 값을 가지고 있을 수 있습니다.</dd>
 <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt>
 <dd><code>attr</code>이라는 특성값을 가지고 있으며, 그 특성값이 정확히 <code>value</code>이거나 <code>value</code>로 시작하면서 <code>-</code>(U+002D) 문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택합니다. 보통 언어 서브코드(<code>en-US</code>, <code>ko-KR</code> 등)가 일치하는지 확인할 때 사용합니다.</dd>
 <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt>
 <dd><code>attr</code>이라는 특성값을 가지고 있으며, 접두사로 <code>value</code>가 값에 포함되어 있으면 이 요소를 선택합니다.</dd>
 <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt>
 <dd><code>attr</code>이라는 특성값을 가지고 있으며, 접미사로 <code>value</code>가 값에 포함되어 있으면 이 요소를 선택합니다.</dd>
 <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt>
 <dd><code>attr</code>이라는 특성값을 가지고 있으며, 값 안에 <code>value</code>라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택합니다.</dd>
 <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt>
 <dd>괄호를 닫기 전에 <code>i</code> 혹은 <code>I</code>를 붙여주면 값의 대소문자를 구분하지 않습니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)</dd>
 <dt><a id="case-sensitive" name="case-sensitive"><code>[attr operator value s]</code></a> {{experimental_inline}}</dt>
 <dd>괄호를 닫기 전에 <code>s</code> 혹은 <code>S</code>를 붙여주면 값의 대소문자를 구분합니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)</dd>
</dl>

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

<h3 id="링크">링크</h3>

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

<pre class="brush: css">a {
  color: blue;
}

/* Internal links, beginning with "#" */
a[href^="#"] {
  background-color: gold;
}

/* Links with "example" anywhere in the URL */
a[href*="example"] {
  background-color: silver;
}

/* Links with "insensitive" anywhere in the URL,
   regardless of capitalization */
a[href*="insensitive" i] {
  color: cyan;
}

/* Links with "cAsE" anywhere in the URL,
with matching capitalization */
a[href*="cAsE" s] {
  color: pink;
}

/* Links that end in ".org" */
a[href$=".org"] {
  color: red;
}</pre>

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

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;&lt;a href="#internal"&gt;Internal link&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://example.com"&gt;Example link&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#InSensitive"&gt;Insensitive internal link&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://example.org"&gt;Example org link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>

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

<p>{{EmbedLiveSample("링크")}}</p>

<h3 id="언어">언어</h3>

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

<pre class="brush: css">/* All divs with a `lang` attribute are bold. */
div[lang] {
  font-weight: bold;
}

/* All divs in US English are blue. */
div[lang~="en-us"] {
  color: blue;
}

/* All divs in Portuguese are green. */
div[lang="pt"] {
  color: green;
}

/* All divs in Chinese are red, whether
   simplified (zh-CN) or traditional (zh-TW). */
div[lang|="zh"] {
  color: red;
}

/* All divs with a Traditional Chinese
   `data-lang` are purple. */
/* Note: You could also use hyphenated attributes
   without double quotes */
div[data-lang="zh-TW"] {
  color: purple;
}</pre>

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

<pre class="brush: html">&lt;div lang="en-us en-gb en-au en-nz"&gt;Hello World!&lt;/div&gt;
&lt;div lang="pt"&gt;Olá Mundo!&lt;/div&gt;
&lt;div lang="zh-CN"&gt;世界您好！&lt;/div&gt;
&lt;div lang="zh-TW"&gt;世界您好！&lt;/div&gt;
&lt;div data-lang="zh-TW"&gt;世界您好！&lt;/div&gt;</pre>

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

<p>{{EmbedLiveSample("언어")}}</p>

<h3 id="HTML_정렬_목록">HTML 정렬 목록</h3>

<p>{{htmlattrxref("type", "input")}} 특성은 주로 {{htmlelement("input")}} 요소에 사용하므로, HTML 명세는 type의 대소문자를 구분하지 않고 선택하도록 요구하고 있습니다. 그러므로 {{htmlelement("ol")}}의 {{htmlattrxref("type", "ol")}}을 특성 선택자로 선택할 땐 {{anch("case-sensitive", "대소문자 구분")}} 수정자를 지정하지 않으면 동작하지 않습니다.</p>

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

<pre class="brush: css">/* List types require the case sensitive flag due to a quirk in how HTML treats the type attribute. */
ol[type="a"] {
  list-style-type: lower-alpha;
  background: red;
}

ol[type="a" s] {
  list-style-type: lower-alpha;
  background: lime;
}

ol[type="A" s] {
  list-style-type: upper-alpha;
  background: lime;
}</pre>

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

<pre class="brush: html;">&lt;ol type="A"&gt;
  &lt;li&gt;Example list&lt;/li&gt;
&lt;/ol&gt;</pre>

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

<p>{{EmbedLiveSample("HTML_정렬_목록")}}</p>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">설명</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>특성값 내에 존재하는 ASCII 문자의 대소문자를 구분하지 않는 수식자(modifier)를 추가하였습니다.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>초기 정의.</td>
  </tr>
 </tbody>
</table>

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



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

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

<ul>
 <li>CSS {{cssxref("attr")}} 함수</li>
</ul>