요소가 PIP(picture in picture) 모드일 경우에 동작한다.
PIP(picture in picture) 모드는 일반적으로 비디오 요소에게 적용되며 DOM API의 requestPictureInPicture()
메소드에 의해 생성된다.
원래의 위치에서 재생되지 않고 독립된 창으로 옮겨져 재생이 된다. 화면에서 맨 앞에 위치하며 화면 스크롤이 발생해도 위치는 고정된다. 그리고 창의 위치를 자유롭게 이동할 수도 있다.
마우스 클릭만으로 언제든지 원래 위치로 돌아와 재생을 계속할 수 있다.
:picture-in-picture
가상 클래스는 PIP 모드가 동작할 때 원래의 재생 위치의 요소를 선택자로 사용한다.
가상 클래스 선택자 형식을 나타낸다.
모든 가상 클래스 선택자에게 적용되는 구문이지만 가상 클래스 따라 <complex-selector>에서 가능한 모든 선택자 타입이 사용되는 것은 아니므로 실제 해당 가상 클래스의 설명을 확인해야 한다.
<complex-selector>?:picture-in-picture
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
<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>
애트리뷰트가 선언되어 있는 대상을 선택자로 사용한다.
:picture-in-picture
Modules | ||
---|---|---|
Module Name | Status | Summary |
Selectors Level 4 | Last review date: 2023-2-23 |