요소의 애트리뷰트(attribute) 존재 자체를 이용하거나 애트리뷰트(attribute)의 값을 사용한다.
속성을 이용한 선택자 패턴은 보통 앞쪽에 특정 태그 타입을 지정하거나 class 선택자를 갖는다. 속성의 영향을 많이 받는 폼(form) 요소를 선택자로 지정할 때 많이 사용된다.
<attribute-presence-selector> | <attribute-value-selector>
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
요소가 지정된 애트리뷰트(attribute)가 선언된 모든 선택자 대상을 나타낸다.
'[' <wq-name> ']'
<ns-prefix>? <ident-token>
애트리뷰트가 선언되어 있는 대상을 선택자로 사용한다.
[ <ident-token> | '*' ]? '|'
요소의 지정된 애트리뷰트와 값을 <attr-matcher>에서 =
, ~=
, |=
수식으로만 비교하여 일치된 대상인 선택자를 나타낸다.
자세한 내용은 <attr-macher>을 참고하라.
'[' <attr-substring-matching> ']'
<wq-name> <attr-matcher> [ <string-token> | <ident-token> ]
연산자 | 형식 | 선택자 대상 | 예 |
---|---|---|---|
= | [att=val] | 애트리뷰트(attribute)의 값이 완전히 일치해야 한다. | [type="email"] |
~= | [att~=val] | 애트리뷰트(attribute) 값의 공백으로 구분된 토큰 목록중에 "val" 이 포함되어야 한다. "val"에 공백이 포함되어 있거나 빈 문자열이면 무효가 된다. | [class~="my"] |
|= | [att|=val] | 애트리뷰트(attribute)의 값이 정확히 "val"이거나 "val" 바로 뒤에 "- "(U+002D)으로 시작해야 한다. 애트리뷰트(attribute)의 값에 하이픈이 포함된 경우에 활용도가 높다. | a[hreflang|="en"] |
^= | [att^=val] | 애트리뷰트(attribute)의 값이 "val"을 접두사로 시작해야 한다. "val"이 빈 문자열이면 무효가 된다. | [type^="image/"] |
$= | [att$=val] | 애트리뷰트(attribute)의 값이 "val"을 접미사로 끝나야 한다. "val"이 빈 문자열이면 무효가 된다. | a[href$=".html"] |
*= | [att*=val] | 애트리뷰트(attribute)의 값에 하위 문자열 "val"이 하나 이상 포함되어야 한다. "val"이 빈 문자열이면 무효가 된다. | [title*="hello"] |
[ '~' | '|' | '^' | '$' | '*' ]? '='
<ns-prefix>? <ident-token>
애트리뷰트가 선언되어 있는 대상을 선택자로 사용한다.
Modules | ||
---|---|---|
Module Name | Status | Summary |
Selectors Level 4 | Last review date: 2023-2-23 | |
Selectors Level 3 | Last review date: 2023-2-23 |