Selectors

Draft
  • account_tree
  • bug_report

Attribute Selector

요소의 속성(Attribute)을 이용한 다양한 선택자 패턴을 가지고 있다.

구문

[attribute=value] { css declarations; }기본형식CSS2
지정된 속성이 가지고 있는 값과 지정된 값이 일치하는 요소를 선택자로 사용한다.
이 예제는 type 속성이 'password' 인 요소만 선택자로 사용한다.
[attribute~=value] { css declarations; }기본형식CSS2
속성 값으로 지정된 문자열을 포함(공백으로 구분된 기준)하는 속성을 가진 요소를 선택자로 사용한다.
이 예제는 input 요소 중에서 value 속성의 값이 'developer.'를 포함하는 경우에 선택자로 사용된다.
[attribute|=value] { css declarations; }기본형식CSS2
지정된 속성이 지정된 값을 가지거나 '-'으로 구분되어 시작하는 경우에 선택자로 사용한다.
이 예제 코드는 lang 속성 값중에서 'en'으로 시작하는 요소를 선택자로 사용한다.
[attribute^=value] { css declarations; }기본형식CSS2
속성의 값이 지정된 값으로 시작하는 경우에 선택자로 사용한다.
이 예제 코드는 class 속성의 값이 'my'로 시작하는 모든 요소를 선택자로 사용한다.
[attribute$=value] { css declarations; }기본형식CSS2
지정된 속성이 지정된 값으로 끝나는 경우에 선택자로 사용된다.
이 예제 코드는 src 속성의 값이 'png'으로 끝나는 경우에 선택자로 사용된다.
[attribute] { css declarations; }기본형식CSS2
지정된 속성을 가진 요소를 선택자로 사용한다.
[attribute*=value] { css declartions; }기본형식CSS2
지정된 속성이 지정된 값을 포함하는 경우에 선택자로 사용된다.
이 예제 코드는 title 속성의 값이 'like'를 포함하는 경우 선택자로 사용된다.

기술 문서

속성을 이용한 선택자 패턴은 보통 앞쪽에 특정 태그 타입을 지정하거나 class 선택자를 갖는다. 속성의 영향을 많이 받는 폼(form) 요소를 선택자로 지정할 때 많이 사용된다.

지원 웹브라우저