부모 자식 관계의 결합을 이용한 선택자 방식이다.
<compound-selector> [ '>' <compound-selector> ]!
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
[ <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>
애트리뷰트가 선언되어 있는 대상을 선택자로 사용한다.
Modules | ||
---|---|---|
Module Name | Status | Summary |
Selectors Level 4 | Last review date: 2023-2-23 |