값이 불확정 상태인 입력 요소와 일치한다.
W3C 명세에 의하면 값이 불확정 상태인 UI 요소에게 적용한다고 되어 있다. 따라서 이 가상 클래스의 사용 대상은 제한적이다. 폼의 사용 과정에서 값이 불확정이라는 것이 무슨 의미일까? W3C 명세에서는 다음과 같이 정의했다.
radio 또는 checkbox인 요소는 체크된 상태와 체크되지 않은 상태 사이를 전환할 수 있지만 때로는 체크되거나 체크되지 않은 불확정 상태에 있을 수도 있다.<progress> 요소가 완료 시점을 알 수 없을 때 불확정 상태가 될 수 있다.첫 번째 경우의 내용을 보면 체크된 상태를 불확정 상태로 보는 문구가 이해가 안되는 부분이지만 분명한 것은 radio의 경우 같은 그룹의 모든 radio 타입의 입력 요소 중에 체크(선택)된게 없다면 불확정 상태로 보고 있다.
가상 클래스 선택자 형식을 나타낸다.
모든 가상 클래스 선택자에게 적용되는 구문이지만 가상 클래스 따라 <complex-selector>에서 가능한 모든 선택자 타입이 사용되는 것은 아니므로 실제 해당 가상 클래스의 설명을 확인해야 한다.
<complex-selector>?:indeterminate아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
<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:indeterminate + label
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| Selectors Level 4 | Last review date: 2023-2-23 | |