[attribute] 선택자

[attribute] 선택자는
지정된 attribute의 값과 이름이 일치하는 속성을 가진 모든 요소를 선택합니다.
대소문자를 구분하지 않습니다.

예를 들어, [title]은 문서내의 title 속성을 가진 모든 요소를 선택하는 선택자입니다.

[attribute] 선택자는 속성 값에 관계없이 attribute 속성이 있는 요소를 나타냅니다.

예제 - 1

CSS 
[title] { /* title 속성을 가진 모든 요소를 선택합니다. */
    background-color: darkblue;
    color: white;
}
HTML title 속성
HTML 
<p>쉽고 재미있는 <abbr title="Hypertext Markup Language">HTML</abbr>을 배웁시다!</p>
<a target="_blank" href="https://www.example.com" title="공식 웹 사이트로 이동">예시 웹 사이트</a>
HTML <abbr> 태그
실제 적용된 모습

예제 - 2

CSS 
[cite] { /* cite 속성을 가진 모든 요소를 선택합니다. */
    background-color: yellowgreen;
}
HTML cite 속성
HTML 
<p>
    팀 버너스리가 말했습니다.
    <q cite="https://example.com/example">
        인터넷이 곧 인권입니다
    </q>
</p>
HTML <q> 태그
실제 적용된 모습

속성에 관련된 선택자

다음은 [attribute] 선택자 이외의 속성에 관련된 선택자들입니다.

속성에 관련된 선택자
[attribute="value"] 이름과 값이 일치하는 속성 선택
[attribute*="value"] 특정 문자열을 포함하는 값이 있는 속성 선택
[attribute~="value"] 특정 단어을 포함하는 값이 있는 속성 선택
[attribute^="value"] 특정 값으로 시작하는 속성 선택
[attribute$="value"] 특정 값으로 끝나는 속성 선택

속성에 관련된 선택자들을 참조하세요.

브라우저 호환성

속성 선택자의 브라우저 호환성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
[attribute] 1 12 1 3

명세서

속성 선택자의 명세서 사양
명세서 사양
[attribute] Selectors Level 4
#attribute-selectors

참고문헌

같이 보기