placehoder로 표시되는 키보드 입력 요소의 스타일 처리를 위한 선택자로 사용된다.
실제 입력을 시작하면 선택자는 무효가 된다.
가상 클래스 선택자 형식을 나타낸다.
모든 가상 클래스 선택자에게 적용되는 구문이지만 가상 클래스 따라 <complex-selector>에서 가능한 모든 선택자 타입이 사용되는 것은 아니므로 실제 해당 가상 클래스의 설명을 확인해야 한다.
〈complex-selector〉?:placeholder-shown아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
〈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〉 ')'<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〉
':' 〈ident-token〉 |':' 〈function-token〉 〈any-value〉 ')'<declaration-value>와 동일하지만 값이 !인 최상위 수준 <semicolon-token> 및 <delim-token>도 허용한다. 이는 모든 컨텍스트에서 유효한 CSS가 될 수 있는 모든 것을 나타낸다.
〈any-value〉?〈wq-name〉 | 〈ns-prefix〉? '*'
[ 〈ident-token〉 | '*' ]? '|'
〈ns-prefix〉? 〈ident-token〉애트리뷰트가 선언되어 있는 대상을 선택자로 사용한다.
input:placeholder-shown
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| Selectors Level 4 | Last review date: 2023-2-23 | |