선택자 레벨 5

1. 소개

이 문서는 선택자 레벨 4에 대한 차이점(diff) 사양입니다.

1.1. 모듈 상호작용

이 모듈은 [selectors-4]에서 CSS를 위해 정의된 선택자 집합을 확장합니다.

2. 위치 의사 클래스

2.1. 로컬 링크 의사 클래스 :local-link

:local-link 의사 클래스는 작성자가 사용자의 현재 사이트 내 위치를 기준으로 하이퍼링크를 스타일링할 수 있게 하며, 사이트 내부 링크와 사이트 외부 링크를 구분할 수 있게 합니다.

(비-함수형) :local-link 의사 클래스는 대상의 절대 URL이 해당 요소 자신의 문서 URL과 일치하는 하이퍼링크의 소스 앵커인 요소를 나타냅니다. 문서의 URL과 링크의 URL을 매칭하기 전에 모든 프래그먼트 식별자는 제거되며; 그 외에는 URL의 모든 부분이 고려됩니다.

nav :local-link { text-decoration: none; } 

함수형 의사 클래스로서, :local-link()는 단 하나의 인수로 0 이상의 정수를 받을 수도 있으며, 문서의 URL이 계층적 스킴에 속하는 경우, 일치시킬 경로 수준의 개수를 나타냅니다:

• :local-link(0)는 대상이 문서 URL과 동일한 오리진(origin)에 있는 링크 요소를 나타냅니다
• :local-link(1)는 대상이 동일한 오리진과 첫 번째 경로 세그먼트를 가지는 링크 요소를 나타냅니다
• :local-link(2)는 대상이 동일한 오리진, 첫 번째 및 두 번째 경로 세그먼트를 가지는 링크 요소를 나타냅니다
• 등.

:not(:local-link(0)) { text-decoration-style: dashed; } 

경로 세그먼트는 URL 경로에서 슬래시(/)로 구분되는 부분입니다. 문서 URL에 특정 세그먼트가 존재하지 않는 경우, 해당 세그먼트가 일치할 것을 요구하는 의사 클래스는 아무것도 매칭하지 않습니다.

URL의 "origin"은 RFC 6454, 4절에서 정의됩니다. URL의 사용자 이름, 비밀번호, 쿼리 문자열, 그리고 프래그먼트 부분은 :local-link(n)에 대해 매칭할 때 고려되지 않습니다. 문서의 URL이 계층적 스킴에 속하지 않는 경우, 함수형 의사 클래스는 아무것도 매칭하지 않습니다.

문서 URL에 최소 N개의 세그먼트가 있다면, :local-link(N)은 URL에 최소 N개의 세그먼트가 있는 링크만 매칭한다는 점은 명확합니다. (이를 통해 :local-link에 일관된 의미를 부여할 수 있으며, 예를 들어 :local-link(2)는 GitHub에서 "저장소 내(within-repo)" 링크를 의미할 수 있습니다.) 그런데 문서 URL에 N개보다 적은 세그먼트가 있고, 링크가 동일 페이지(same-page)인 경우에는 어떻게 되나요? "널 세그먼트(null segments)"를 일치하는 것으로 계산해야 할까요, 아니면 그렇지 않아야 할까요?

3. 사용자 동작 의사 클래스

3.1. 관심(Interest) 의사 클래스: :interest-source 및 :interest-target

일반적인 UI 기능 중 하나는 사용자가 특정 요소에 대해 "관심을 표시(show interest)"할 수 있는 능력이며 ( 관심 소스), UI는 그 관심에 반응하여 다른 요소에 추가 정보를 표시합니다 ( 관심 대상), 보통 팝업 형태입니다. 예를 들어, 페이지에서 사용자 이름 위에 마우스를 올리면 해당 사용자의 정보 카드가 나타날 수 있고; 또는 링크를 길게 누르면 링크 목적지의 미리보기가 나타날 수 있습니다. 이런 일이 발생할 때마다, 첫 번째 요소는

참고: 어떤 요소가 관심 소스가 될 수 있는지, 어떻게 관심 대상에 연결되는지, 그리고 "관심"이 어떻게 표시되는지는 모두 호스트 언어가 정의합니다. 예를 들어 HTML에서는, "관심을 표시"할 수 있는 요소(즉 관심 소스가 되는 요소)를 나타내기 위해 interestfor 속성을 사용하며, 그 속성은 추가 정보를 표시하려는 다른 요소(연결된 관심 대상)를 가리킵니다 (보통 popover 요소).

:interest-source 의사 클래스는 사용자가 현재 "관심을 표시"하고 있는 관심 소스 요소에 적용되며, :interest-target 의사 클래스는 :interest-source에 매칭되는 요소와 연관된 관심 대상에 적용됩니다.

참고: :interest-source는 사용자가 현재 관심을 갖고 있는 관심 소스에만 매칭되며, 잠재적으로 관심 표시가 가능할 수 있는 어떤 요소에도 매칭되는 것은 아닙니다. 예를 들어 HTML에서는, 단지 interestfor 속성이 있다는 것만으로는 해당 요소가 이 의사 클래스에 매칭되지 않으며; 사용자가 실제로 그것에 대해 관심을 표시해야 합니다. 마찬가지로, :interest-target도 사용자가 현재 관심을 갖고 있는 요소에 연결된 관심 대상에만 매칭되며, interestfor 속성이 가리키는 어떤 요소에도 매칭되는 것은 아닙니다.

4. 입력 의사 클래스

4.1. 입력 값 검사

4.1.1. 빈 값 의사 클래스: :blank

:blank 의사 클래스는 입력 값이 비어 있는 사용자 입력 요소에 적용됩니다 (빈 문자열로 구성되거나, 또는 그 밖의 null 입력).

5. 시간 차원 의사 클래스

이러한 의사 클래스는 문서의 음성 렌더링 중이거나, WebVTT를 사용하여 자막을 렌더링하는 비디오의 표시 중인 경우처럼, 어떤 타임라인에서 현재 표시되거나 활성인 위치에 대해 요소를 분류합니다.

CSS는 이 타임라인을 정의하지 않으며; 호스트 언어가 정의해야 합니다. 요소에 대해 정의된 타임라인이 없다면, 이러한 의사 클래스는 해당 요소에 매칭되어서는 안 됩니다.

참고: :current 요소의 조상도 또한 :current이지만, :past 또는 :future 요소의 조상은 반드시 :past 또는 :future인 것은 아닙니다. 어떤 요소는 최대 하나의 :current, :past, 또는 :future에만 매칭됩니다.

5.1. 현재 요소 의사 클래스: :current

:current 의사 클래스는 현재 표시되고 있는 요소, 또는 그 요소의 조상을 나타냅니다.

대체 형태인 :current()는 인수로 복합 선택자(compound selectors) 목록을 받습니다: 이는 인수에 매칭되는 :current 요소를 나타내거나, 그것이 매칭되지 않으면, 인수에 매칭되는 :current 요소의 가장 안쪽(innermost) 조상을 나타냅니다. ( :current 요소나 그 조상 중 어느 것도 인수에 매칭되지 않으면, 해당 선택자는 아무것도 나타내지 않습니다.)

:current(p, li, dt, dd) {
  background: yellow;
}

5.2. 과거 요소 의사 클래스: :past

:past 의사 클래스는 :current 요소보다 완전히 이전에 발생하는 것으로 정의된 모든 요소를 나타냅니다. 예를 들어 WebVTT 사양은 :past 의사 클래스를 미디어 요소의 현재 재생 위치에 상대적으로 정의합니다. 문서 언어가 요소의 시간 기반 순서를 정의하지 않는다면, 이는 :current 요소의 (직접 또는 간접) 이전 형제일 수 있는 모든 요소를 나타냅니다.

5.3. 미래 요소 의사 클래스: :future

:future 의사 클래스는 :current 요소보다 완전히 이후에 발생하는 것으로 정의된 모든 요소를 나타냅니다. 예를 들어 WebVTT 사양은 :future 의사 클래스를 미디어 요소의 현재 재생 위치에 상대적으로 정의합니다. 문서 언어가 요소의 시간 기반 순서를 정의하지 않는다면, 이는 :current 요소의 (직접 또는 간접) 다음 형제일 수 있는 모든 요소를 나타냅니다.

6. 사용자 정의 상태 노출: :state() 의사 클래스

:state( <ident> ) 의사 클래스는, 커스텀 요소(custom elements) 중에서 상태 집합(states set)이 선택자의 인수 값과 동일한(is) 문자열을 포함하는 요소에 매칭됩니다.

참고: “is” 매칭 동작은 문자열을 코드포인트로 비교하며; 특히 대소문자를 구분합니다. 따라서 상태 집합에 "foo"가 있다면, :state(FOO)는 매칭되지 않습니다.

:state() 의사 클래스의 정확한 매칭 동작은 호스트 언어가 정의합니다. 명확성을 위해, 이 의사 클래스를 설명하는 개념은 HTML 정의로 연결됩니다; 자세한 내용은 HTML의 정의를 참고하십시오. 다른 호스트 언어는 이 의사 클래스가 어떻게 매칭되는지 정의해야 합니다.

7. 제목 구조: 제목 의사 클래스 :heading 및 :heading()

(비-함수형) :heading 의사 클래스는 문서 언어(예: [HTML5])가 정의한 의미론에 따라 제목 레벨(heading level)을 가진 요소에 매칭됩니다.

특이성(specificity)에서 :heading의 특이성은 클래스와 같습니다.

:heading { text-decoration: underline; }

함수형 의사 클래스로서, :heading() 표기법은 제공된 integer 값 중 하나와 매칭되는 제목 레벨(heading level)을 가진 요소를 나타냅니다. 구문은 다음과 같습니다:

:heading() = :heading( <level># )

여기서 <level>은 type 플래그가 "integer"로 설정된 <number-token>입니다.

특이성(specificity)에서 :heading()의 특이성은 클래스와 같습니다.

:heading(1, 2, 3) { font-weight: 900; }

:heading(6, 7, 8, 9) { font-weight: 500; }

:heading(1, 2) { text-decoration: underline; }

:heading(3, 4, 5, 6, 7, 8, 9) { text-decoration: none; }

참고: 제목 레벨(heading level)은 요소의 타입 선택자(type selector)와 다를 수 있습니다. 따라서 선택자 h1:heading(3)은 노출된 제목 레벨이 3인 어떤 h1 태그에도 매칭됩니다.

8. 격자 구조 선택자

2차원 격자에서 셀의 이중 연결(행과 열에 대한 연결)은 계층적 마크업 언어에서 부모-자식 관계로는 표현될 수 없습니다. 이 연결 중 하나만 계층적으로 표현될 수 있으며: 다른 하나는 문서 언어의 의미론에 의해 명시적으로 또는 암묵적으로 정의되어야 합니다. 가장 일반적인 계층적 마크업 언어 두 가지인 HTML과 DocBook에서는, 마크업이 행 중심(row-primary)입니다(즉, 행에 대한 연결이 계층적으로 표현됩니다); 열은 암묵적으로 유추되어야 합니다. 이러한 암묵적인 열 기반 관계를 표현할 수 있도록, 열 결합자(column combinator)와 :nth-col(), 그리고 :nth-last-col() 의사 클래스가 정의됩니다. 열 중심(column-primary) 형식에서는, 이들 의사 클래스는 대신 행 연결에 대해 매칭됩니다.

8.1. 열 결합자 (||)

열 결합자(column combinator)는, 두 개의 파이프 문자로 구성되며(||), 열 요소와 그 열에 속하는 셀 요소 간의 관계를 나타냅니다. 열 소속 여부는 문서 언어의 의미론에 근거해서만 결정됩니다: 요소가 어떻게 표시되는지 또는 표시되는지 여부는 고려되지 않습니다. 어떤 셀 요소가 둘 이상의 열에 속한다면, 그 셀은 그 열들 중 어느 하나에 속함을 나타내는 선택자로 표현됩니다.

col.selected || td {
  background: gray;
  color: white;
  font-weight: bold;
}

<table>
  <col span="2">
  <col class="selected">
  <tr><td>A <td>B <td>C
  <tr><td colspan="2">D <td>E
  <tr><td>F <td colspan="2">G
</table>

8.2. :nth-col() 의사 클래스

:nth-col(An+B) 의사 클래스 표기법은, 어떤 양의 정수 또는 0인 n 값에 대해, 그 이전에 An+B-1개의 열이 있는 열에 속하는 셀 요소를 나타냅니다. 열 소속 여부는 문서 언어의 의미론에 근거해서만 결정됩니다: 요소가 어떻게 표시되는지 또는 표시되는지 여부는 고려되지 않습니다. 어떤 셀 요소가 둘 이상의 열에 속한다면, 그 셀은 그 열들 중 어느 하나를 나타내는 선택자로 표현됩니다.

CSS Syntax 모듈 [CSS3SYN]은 An+B 표기법을 정의합니다.

8.3. :nth-last-col() 의사 클래스

:nth-last-col(An+B) 의사 클래스 표기법은, 어떤 양의 정수 또는 0인 n 값에 대해, 그 이후에 An+B-1개의 열이 있는 열에 속하는 셀 요소를 나타냅니다. 열 소속 여부는 문서 언어의 의미론에 근거해서만 결정됩니다: 요소가 어떻게 표시되는지 또는 표시되는지 여부는 고려되지 않습니다. 어떤 셀 요소가 둘 이상의 열에 속한다면, 그 셀은 그 열들 중 어느 하나를 나타내는 선택자로 표현됩니다.

CSS Syntax 모듈 [CSS3SYN]은 An+B 표기법을 정의합니다.

9. 결합자

9.1. 참조 결합자 /ref/

참조 결합자(reference combinator)는 그 사이에 CSS 한정 이름(qualified name)이 들어간 두 개의 슬래시로 구성되며, 두 복합 선택자(compound selectors)를 구분합니다. 예: A /attr/ B. 첫 번째 복합 선택자가 나타내는 요소는 두 번째 복합 선택자가 나타내는 요소를 명시적으로 참조합니다. 호스트 언어가 이 관계를 표현하기 위한 다른 구문을 정의하지 않는 한, 이 관계는 첫 번째 요소의 지정된 속성 값이 두 번째 요소를 참조하는 IDREF이거나 ID 선택자(ID selector)인 경우 존재하는 것으로 간주됩니다.

참조 결합자에 대한 속성 매칭은 속성 선택자(attribute selectors)와 동일한 규칙을 따릅니다.

label:is(:hover, :focus) /for/ input,       /* "for" 속성에 의한 연결 */
label:is(:hover, :focus):not([for]) input { /* 포함(containment)에 의한 연결 */
  box-shadow: yellow 0 0 10px;
}

10. 변경사항

10.1. 레벨 4 이후 변경사항

레벨 4 이후 추가된 사항:

• 참조 결합자 (선택자 4의 이전 초안에서 연기됨)
• :local-link 의사 클래스의 함수형 형태 (선택자 4의 이전 초안에서 연기됨)
• :state() 의사 클래스
• :heading 및 :heading() 의사 클래스
• :local-link 의사 클래스 (선택자 4의 이전 초안에서 연기됨)
• :interest-source 및 :interest-target 의사 클래스
• :blank 의사 클래스 (선택자 4의 이전 초안에서 연기됨)
• 격자 구조(열) 선택자 (선택자 4의 이전 초안에서 연기됨)
• 시간 차원 의사 클래스 (선택자 4의 이전 초안에서 연기됨)

11. 감사의 글

CSS 워킹 그룹은 여러 해에 걸쳐 이전 선택자 사양에 기여한 모든 분들께 감사를 전하고자 합니다. 이러한 사양들은 본 사양의 기반을 이루었습니다. 특히 워킹 그룹은 선택자 레벨 5에 대한 구체적 기여에 대해 다음 분께 특별한 감사를 전하고자 합니다: Joey Arhar.

개인정보 고려사항

적절한 경우 레벨 4에서 복사되어야 합니다.

보안 고려사항

적절한 경우 레벨 4에서 복사되어야 합니다.