속성 선택자

CSS 속성 선택자 는 요소의 주어진 속성의 존재 여부나 그 값을 판별해 선택합니다.

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

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

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

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

구문

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

예제

/* "lang" 속성을 가지는 모든 span 요소의 폰트 굵기를 굵게 바꿉니다. */
span[lang] {font-weight:bold;}
 
/* 언어 속성값이 포르투갈어인 모든 span 요소의 색상을 녹색으로 바꿉니다. */
span[lang="pt"] {color:green;}

/* 언어 속성값이 en-us인 모든 span 요소의 색상을 파란색으로 바꿉니다.  */
span[lang~="en-us"] {color: blue;}

/* 간자체(zh-CN) 혹은 번자체(zh-TW) 중국어 span  요소는 모두 붉은색으로 바꿉니다. */
span[lang|="zh"] {color: red;}

/* 모든 내부 링크 요소의 배경색을 금색으로 바꿉니다. */
a[href^="#"] {background-color: gold;}

/* 클래스명이 "main"으로 시작하는 모든 span 요소의 배경색을 노란색으로 바꿉니다. */
/* span 요소의 클래스명이 만약 "banner main"이면 영향을 받지 않을 것입니다. */
span[class^="main"] {background-color: yellow;}

/* url이 .cn으로 끝나는 모든 링크 요소의 색상을 붉은색으로 바꿉니다. */
a[href$=".cn"] {color: red;}

/* url안에 "example"이라는 단어를 포함하고 있는 모든 링크 요소의 배경색을 회색으로 바꿉니다. */
a[href*="example"] {background-color: #CCCCCC;}

/* 모든 이메일 인풋 요소의 테두리를 파란색으로 바꿉니다. */
/* 대소문자를 구분하지 않습니다. "email", "EMAIL", "eMaIL" 모두 조건을 만족합니다. */
input[type="email" i] {border-color: blue;}
<div class="hello-example">
    <a href="http://example.com">English:</a>
    <span lang="en-us en-gb en-au en-nz">Hello World!</span>
</div>
<div class="hello-example">
    <a href="#portuguese">Portuguese:</a>
    <span lang="pt">Olá Mundo!</span>
</div>
<div class="hello-example">
    <a href="http://example.cn">Chinese (Simplified):</a>
    <span lang="zh-CN">世界您好!</span>
</div>
<div class="hello-example">
    <a href="http://example.cn">Chinese (Traditional):</a>
    <span lang="zh-TW">世界您好!</span>
</div>

명세

명세 상태 설명
Selectors Level 4
The definition of 'attribute selectors' in that specification.
Working Draft 속성값 내에 존재하는 ASCII 문자의 대소문자를 구분하지 않는 수식자(modifier)를 추가하였습니다.
Selectors Level 3
The definition of 'attribute selectors' in that specification.
Recommendation  
CSS Level 2 (Revision 1)
The definition of 'attribute selectors' in that specification.
Recommendation 초기 정의.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Attribute selector ([attr=value])Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 7Opera Full support 9Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support Yes
Case-insensitive modifier (i)Chrome Full support 49Edge No support NoFirefox Full support 47IE No support NoOpera Full support 36Safari Full support 9WebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 47Opera Android Full support YesSafari iOS Full support 9Samsung Internet Android Full support 5.0
Case-sensitive modifier (s)
Experimental
Chrome No support NoEdge No support NoFirefox Full support 66IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 66Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

같이 보기