CSS [attribute=value] 선택자

정의와 사용법

CSS [attribute=value] 선택자는 지정된 속성을 가진 요소를 선택하며, 속성 값이 완전히 일치하는 요소를 선택합니다.

예제

예제 1

target="_blank"인 모든 <a> 요소의 스타일을 선택하고 설정합니다. 동시에 lang="it"인 모든 <p> 요소의 스타일을 선택하고 설정합니다:

a[target="_blank"] {
  background-color: yellow;
}
p[lang="it"] {
  background-color: salmon;
}

직접 시도해보세요

예제 2

<input type="text"> 요소의 너비를 100px로 설정합니다. 그러나, 포커스를 받으면 너비를 250px로 설정합니다:

input[type="text"] {
  width: 100px;
}
input[type="text"]:focus {
  width: 250px;
}

직접 시도해보세요

CSS 문법

[attribute = value] {
  css 선언;
}

기술 세부 사항

브라우저 지원

표의 숫자는 이 선택자를 최초로 지원한 브라우저 버전을 나타냅니다.