[attribute="value"] 속성 선택자

[attribute="value"] 선택자는
지정된 attribute라는 이름의 속성 값이 value와 일치하는 모든 요소를 선택합니다.

예를 들어, [target="_blank"]는 문서내의 target 속성의 값이 _blank와 일치하는 모든 요소를 선택하는 선택자입니다.

[attribute="value"] 선택자는 값이 정확히 value인 attribute 속성이 있는 요소를 나타냅니다.

지정된 속성의 이름은 대소문자를 구분하지 않지만, 값은 대소문자를 구분합니다.

예제

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

구문

다음의 두 가지 형태는 모두 동일합니다.

  • [attribute="value"]
  • [attribute='value']
CSS 
[target="_blank"] {
    background-color: darkblue;
    color: white;
}

/* 다음과 같이 작성해도 동일합니다. */
[target='_blank'] {
    background-color: darkblue;
    color: white;
}

속성에 관련된 선택자

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

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

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

브라우저 호환성

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

명세서

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

참고문헌

같이 보기