웹브라우저에 의해 제시된 값으로 채워질 때 일치한다. 사용자가 필드의 값을 수정하면 더이상 일치되지 않는다.
가상 클래스 선택자 형식을 나타낸다.
모든 가상 클래스 선택자에게 적용되는 구문이지만 가상 클래스 따라 <complex-selector>에서 가능한 모든 선택자 타입이 사용되는 것은 아니므로 실제 해당 가상 클래스의 설명을 확인해야 한다.
<complex-selector>?:autofill
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
<compound-selector> [ <combinator>? <compound-selector> ]*
결합자는 두 개 이상의 <compound-selector>가 결합하는 관계를 나타낸다. 결합자는 복합적으로 사용될 수 있다. 결합 관계에서 맨 끝쪽의 선택자에 일치하는 요소가 스타일 적용 대상이 된다.
기호 | 결합 관계 | 설명 | 사용 예 |
---|---|---|---|
">" | 부모 > 자식 | 두 요소 사이의 하위 관계를 나타낸다. | .header > span |
"+" | 형제 + 다음 형제 | 동등 관계를 가지며 바로 뒤의 요소를 나타낸다. | h1.title + h2 |
"~" | 형제 ~ 이후의 모든 형제 | 동등 관계를 가지며 이후의 모든 요소를 나타낸다. | h1 ~ pre |
"||" | 기준 열(column) || 대상 열(column) | 기준 요소가 속하는 열(column)에 대상 열(column)이 속해 있는 경우를 나타낸다. 현재 웹브라우저의 지원 현황을 확인할 필요가 있다. | col.selected || td |
'>' | '+' | '~' | [ '|' '|' ]
[ <type-selector>? <subclass-selector>*[ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
':' <ident-token> |':' <function-token> '(' <any-value> ')'
0
개 이상의 코드 포인트(code points)로 구성된 값을 갖는 함수를 가리키는 토큰(token)이다.
<declaration-value>와 동일하지만 값이 !인 최상위 수준 <semicolon-token> 및 <delim-token>도 허용한다. 이는 모든 컨텍스트에서 유효한 CSS가 될 수 있는 모든 것을 나타낸다.
<any-value>?
':' <pseudo-class-selector>
':' <ident-token> |':' <function-token> '(' <any-value> ')'
<id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
'[' <wq-name> ']' |'[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'
i | s
연산자 | 형식 | 선택자 대상 | 예 |
---|---|---|---|
= | [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>
애트리뷰트가 선언되어 있는 대상을 선택자로 사용한다.
[ <ident-token> | '*' ]? '|'
'.' <ident-token>
<hash-token>
#[a-zA-Z0-9_-]
':' <ident-token> |':' <function-token> '(' <any-value> ')'
0
개 이상의 코드 포인트(code points)로 구성된 값을 갖는 함수를 가리키는 토큰(token)이다.
<declaration-value>와 동일하지만 값이 !인 최상위 수준 <semicolon-token> 및 <delim-token>도 허용한다. 이는 모든 컨텍스트에서 유효한 CSS가 될 수 있는 모든 것을 나타낸다.
<any-value>?
<wq-name> | <ns-prefix>? '*'
[ <ident-token> | '*' ]? '|'
<ns-prefix>? <ident-token>
애트리뷰트가 선언되어 있는 대상을 선택자로 사용한다.
input:autofill
Modules | ||
---|---|---|
Module Name | Status | Summary |
Selectors Level 4 | Last review date: 2023-2-23 |