셀렉터 Level 3

요약

셀렉터는 트리 내의 요소를 대상으로 매칭하는 패턴으로, XML 문서에서 노드를 선택하는 여러 기술 중 하나입니다. 셀렉터는 HTML과 XML에서 사용하도록 최적화되어 있으며, 성능이 중요한 코드에서도 사용할 수 있도록 설계되었습니다.

CSS (계단식 스타일 시트)는 HTML과 XML 문서의 화면, 인쇄, 음성 등 렌더링을 기술하는 언어입니다. CSS는 문서 내 요소에 스타일 속성을 적용하기 위해 셀렉터를 사용합니다.

이 문서는 CSS1 [CSS1]과 CSS2 [CSS21]에 이미 존재하는 셀렉터를 설명하고, CSS3와 추가적인 언어를 위한 신규 셀렉터를 소개합니다.

셀렉터는 다음과 같은 기능을 정의합니다:

expression ∗ element → boolean

즉, 이 명세서는 요소와 셀렉터가 주어졌을 때 해당 요소가 셀렉터에 매칭되는지 여부를 정의합니다.

이러한 표현식은 예를 들어 서브트리 내 모든 요소에 대해 평가하여 요소 집합이나 단일 요소를 선택하는 데에도 사용할 수 있습니다. STTS (Simple Tree Transformation Sheets)라는 XML 트리 변환 언어가 이 메커니즘을 사용합니다. [STTS3]

이 문서의 상태

이 섹션은 문서가 발행된 시점의 상태를 설명합니다. 다른 문서가 본 문서를 대체할 수 있습니다. 현재 W3C 발행물 목록과 이 기술 보고서의 최신 개정판은 W3C 기술 보고서 색인 https://www.w3.org/TR/ 에서 확인할 수 있습니다.

이 W3C 권고는 2018년 9월 11일 제안 권고와 동일하지만, 상태와 서식이 W3C 권고에 맞게 업데이트되었습니다.

이 문서는 W3C 회원, 소프트웨어 개발자, 기타 W3C 그룹 및 관심 있는 당사자들이 검토했으며, W3C 이사에 의해 W3C 권고로 승인되었습니다. 안정된 문서이며 참고 자료로 사용하거나 다른 문서에서 인용할 수 있습니다. W3C는 권고를 알리고 널리 배포하도록 역할을 하며, 이는 웹의 기능성과 상호운용성을 향상시킵니다.

이 문서는 CSS 작업 그룹이 W3C 권고로 작성한 것입니다.

제안 권고(Proposed Recommendation)는 널리 검토되어 구현 준비가 된 문서입니다. W3C는 모든 사람이 이 명세를 구현하고 2018년 10월 11일까지 GitHub 이슈로 의견을 제출할 것을 권장합니다. 모든 이슈와 의견은 아카이브에 저장되며, 과거 아카이브도 있습니다.

이 문서는 W3C 특허 정책에 따라 운영되는 그룹에서 작성되었습니다. W3C는 해당 그룹의 산출물과 관련해 공개 특허 공개 목록을 유지합니다. 해당 페이지에는 특허 공개 방법도 안내되어 있습니다. 특정 특허가 필수적 청구(Claim)에 해당한다고 판단되는 경우, W3C 특허 정책 6장에 따라 정보를 공개해야 합니다.

이 문서는 2018년 2월 1일 W3C 프로세스 문서에 의해 관리됩니다.

별도의 테스트 스위트와 구현 보고서가 제공됩니다.

1. 소개

Selectors Level 1과 Selectors Level 2는 각각 CSS1 및 CSS2.1 명세에서 정의된 셀렉터 기능의 부분 집합으로 정의됩니다.

1.1. 의존성

이 명세의 일부 기능은 CSS에 특화되어 있거나 CSS에만 적용되는 제한이나 규칙이 있습니다. 본 명세에서는 이러한 부분을 CSS2.1을 기준으로 설명합니다. [CSS21]

1.2. 용어

예시, 참고, 그리고 명시적으로 비규범적이라 표시된 섹션을 제외한 본 명세의 모든 내용은 규범적입니다.

추가적인 용어 정의는 CSS2.1 정의 섹션 [CSS21]에 있습니다. 문서 소스 코드 및 코드 조각의 예시는 XML [XML10] 또는 HTML [HTML401][HTML5] 문법으로 제시됩니다.

1.3. CSS2에서의 변경점

이 섹션은 비규범적입니다.

CSS2와 Selectors의 셀렉터 간 주요 차이점은 다음과 같습니다:

• 기본 정의(셀렉터, 셀렉터 그룹, 단순 셀렉터 등) 목록이 변경되었습니다. 특히 CSS2에서 단순 셀렉터로 불렸던 것이 이제 단순 셀렉터 시퀀스(sequence of simple selectors)로 불리며, "단순 셀렉터"라는 용어는 이 시퀀스의 구성 요소를 뜻합니다.
• 이제 요소 타입 셀렉터, 범용 셀렉터 및 속성 셀렉터에서 네임스페이스 구성 요소를 선택적으로 사용할 수 있습니다.
• 새 결합자(combinator)가 도입되었습니다.
• 부분 문자열 매칭 속성 셀렉터 등 새로운 단순 셀렉터와 새로운 가상 클래스(pseudo-class)가 추가되었습니다.
• 새로운 가상 요소(pseudo-element)가 추가되고, "::" 표기법이 도입되었습니다.
• 문법이 새롭게 작성되었습니다.
• 셀렉터를 통합하는 명세에 프로필을 추가할 수 있으며, 각 명세가 실제로 지원하는 셀렉터 집합을 정의할 수 있습니다.
• 셀렉터는 이제 CSS3 모듈이자 독립 명세로, 다른 명세에서 CSS와 독립적으로 이 문서를 참조할 수 있습니다.
• 명세의 자체 테스트 스위트를 갖추었습니다.

2. 셀렉터

이 섹션은 비규범적으로, 이후 섹션의 내용을 요약합니다.

셀렉터는 구조를 나타냅니다. 이 구조는 (CSS 규칙 등에서) 조건으로 사용되어 셀렉터가 문서 트리에서 어떤 요소에 매칭되는지 결정하거나, 해당 구조에 해당하는 HTML 또는 XML 조각을 평면적으로 기술하는 데 사용할 수 있습니다.

셀렉터는 단순한 요소 이름부터 풍부한 문맥적 표현까지 다양합니다.

아래 표는 셀렉터 문법을 요약한 것입니다:

3. 대소문자 구분

모든 셀렉터 문법은 ASCII 범위 내에서(즉, [a-z]와 [A-Z]는 동일하게 취급) 대소문자를 구분하지 않습니다. 단, 셀렉터의 제어를 벗어난 부분은 예외입니다. 셀렉터에서 문서 언어의 요소 이름, 속성 이름, 속성 값의 대소문자 구분 여부는 문서 언어에 따라 달라집니다. 예를 들어, HTML에서는 요소 이름이 대소문자를 구분하지 않지만, XML에서는 대소문자를 구분합니다. 네임스페이스 접두사의 대소문자 구분은 [CSS3NAMESPACE]에서 정의합니다.

4. 셀렉터 문법

셀렉터는 하나 이상의 단순 셀렉터 시퀀스가 결합자로 연결된 구조입니다. 셀렉터의 마지막 단순 셀렉터 시퀀스에는 하나의 가상 요소를 추가할 수 있습니다.

단순 셀렉터 시퀀스는 단순 셀렉터가 결합자 없이 연결된 구조입니다. 항상 타입 셀렉터 또는 범용 셀렉터로 시작하며, 시퀀스 내에 다른 타입 셀렉터나 범용 셀렉터는 허용되지 않습니다.

단순 셀렉터는 타입 셀렉터, 범용 셀렉터, 속성 셀렉터, 클래스 셀렉터, ID 셀렉터, 가상 클래스 중 하나입니다.

결합자는: 공백, ">"(U+003E, >), "+"(U+002B, +), "~"(U+007E, ~)입니다. 결합자와 그 주변의 단순 셀렉터 사이에는 공백이 올 수 있습니다. 공백에는 "스페이스"(U+0020), "탭"(U+0009), "줄바꿈"(U+000A), "캐리지 리턴"(U+000D), "폼 피드"(U+000C)만 올 수 있습니다. "em-space"(U+2003), "ideographic space"(U+3000) 같은 다른 유사 공백 문자는 공백에 포함되지 않습니다.

셀렉터가 대표하는 문서 트리 내 요소는 셀렉터의 대상입니다. 단일 단순 셀렉터 시퀀스로 이루어진 셀렉터는 해당 조건을 만족하는 모든 요소를 나타냅니다. 추가적인 단순 셀렉터 시퀀스와 결합자를 앞에 붙이면 일치 조건이 추가되어, 셀렉터의 대상은 항상 마지막 단순 셀렉터 시퀀스가 대표하는 요소의 부분집합이 됩니다.

단순 셀렉터 시퀀스나 가상 요소가 없는 빈 셀렉터는 잘못된 셀렉터입니다.

셀렉터 내 문자들은 CSS와 동일한 이스케이프 규칙에 따라 백슬래시로 이스케이프할 수 있습니다. [CSS21]

일부 셀렉터는 네임스페이스 접두사를 지원합니다. 네임스페이스 접두사의 선언 방식은 셀렉터를 사용하는 언어가 지정해야 합니다. 언어가 네임스페이스 접두사 선언 방식을 지정하지 않으면 접두사는 선언되지 않습니다. CSS에서는 @namespace 규칙으로 선언합니다. [CSS3NAMESPACE]

5. 셀렉터 그룹

쉼표로 구분된 셀렉터 목록은 각 셀렉터가 선택하는 모든 요소의 합집합을 나타냅니다. (쉼표는 U+002C입니다.) 예를 들어, CSS에서 여러 셀렉터가 동일한 선언을 공유할 경우 쉼표로 구분된 목록으로 그룹화할 수 있습니다. 쉼표 앞뒤에는 공백이 올 수 있습니다.

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

h1, h2, h3 { font-family: sans-serif }

경고: 이 예시에서는 모든 셀렉터가 올바른 셀렉터이기 때문에 동등합니다. 만약 셀렉터 중 하나라도 잘못된 셀렉터라면, 전체 셀렉터 그룹이 잘못된 것으로 간주됩니다. 이 경우, 세 개의 heading 요소에 대한 규칙이 모두 무효화되지만, 개별 규칙을 사용할 경우에는 특정 셀렉터만 무효화됩니다.

h1 { font-family: sans-serif }
h2..foo { font-family: sans-serif }
h3 { font-family: sans-serif }

h1, h2..foo, h3 { font-family: sans-serif }

6. 단순 셀렉터

6.1. 타입 셀렉터

타입 셀렉터는 CSS 정규 이름 [CSS3NAMESPACE] 문법으로 작성된 문서 언어의 요소 타입 이름입니다. 타입 셀렉터는 문서 트리 내 해당 타입의 요소 인스턴스를 나타냅니다.

h1

6.1.1. 타입 셀렉터와 네임스페이스

타입 셀렉터는 선택적으로 네임스페이스 구성 요소(이전에 선언된 네임스페이스 접두사)를 요소 이름 앞에 네임스페이스 구분자인 "|" (U+007C, |)로 붙여 사용할 수 있습니다. (예시로, XML의 네임스페이스 사용은 [XML-NAMES] 참조.)

네임스페이스 구분자 앞에 접두사가 없으면, 네임스페이스가 없는 요소만 선택합니다.

네임스페이스 접두사로 별표(*)를 사용하면, 모든 네임스페이스(네임스페이스가 없는 요소 포함)의 요소를 선택합니다.

네임스페이스 구성 요소가 없는 타입 셀렉터(네임스페이스 구분자가 없음)는 요소의 네임스페이스와 상관없이 선택합니다("*|"와 동등). 단, 네임스페이스 셀렉터에 대한 기본 네임스페이스가 선언되어 있으면 해당 네임스페이스의 요소만 선택합니다.

이전에 네임스페이스 셀렉터에 대해 선언되지 않은 네임스페이스 접두사가 포함된 타입 셀렉터는 잘못된 셀렉터입니다.

네임스페이스를 인식하는 클라이언트에서는 타입 셀렉터의 이름 부분(네임스페이스 구분자 이후)은 요소의 로컬 이름과만 일치합니다.

요약:

ns|E

네임스페이스 ns의 이름이 E인 요소

*|E

모든 네임스페이스(네임스페이스 없음 포함)의 이름이 E인 요소

|E

네임스페이스가 없는 이름이 E인 요소

E

셀렉터에 대해 기본 네임스페이스가 선언되지 않았다면 *|E와 동일. 선언되었다면 ns|E와 동일(ns는 기본 네임스페이스).

@namespace foo url(http://www.example.com);
 foo|h1 { color: blue }  /* 첫 번째 규칙 */
 foo|* { color: yellow } /* 두 번째 규칙 */
 |h1 { color: red }      /* ...*/
 *|h1 { color: green }
 h1 { color: green }

6.2. 범용 셀렉터

범용 셀렉터는 CSS 정규 이름 [CSS3NAMESPACE]에서 로컬 이름으로 별표(* U+002A)를 사용하여 작성합니다. 이는 모든 요소 타입의 정규 이름을 나타내며, 셀렉터에 대해 기본 네임스페이스가 지정되지 않은 경우 모든 네임스페이스(네임스페이스 없음 포함)의 단일 요소를 나타냅니다. 기본 네임스페이스가 지정된 경우에는 아래 범용 셀렉터와 네임스페이스를 참조하세요.

네임스페이스 접두사가 없는 *로 표현되는 범용 셀렉터가 단순 셀렉터 시퀀스 셀렉터의 유일한 구성 요소가 아니거나, 가상 요소 바로 앞에 오면 *를 생략할 수 있으며, 범용 셀렉터의 존재가 암시됩니다.

참고: *는 생략하지 않는 것이 좋습니다. 예를 들어 div :first-child와 div:first-child의 혼동을 줄일 수 있습니다. div *:first-child가 더 읽기 쉽습니다.

6.2.1. 범용 셀렉터와 네임스페이스

범용 셀렉터도 선택적으로 네임스페이스 구성 요소를 사용할 수 있습니다. 사용법은 다음과 같습니다:

ns|*

네임스페이스 ns의 모든 요소

*|*

모든 요소

|*

네임스페이스가 없는 모든 요소

*

기본 네임스페이스가 지정되지 않은 경우 *|*와 동일. 지정된 경우 ns|*와 동일(ns는 기본 네임스페이스).

이전에 선언되지 않은 네임스페이스 접두사가 포함된 범용 셀렉터는 잘못된 셀렉터입니다.

6.3. 속성 셀렉터

셀렉터는 요소의 속성을 표현할 수 있습니다. 셀렉터가 요소에 대해 평가식으로 사용될 때, 속성 셀렉터는 해당 요소가 속성 셀렉터가 나타내는 속성과 일치하는 속성을 가지고 있다면 일치로 간주해야 합니다.

6.3.1. 속성 존재 및 값 셀렉터

CSS2에서는 네 가지 속성 셀렉터가 도입되었습니다:

[att]

att 속성을 가진 요소를 나타냅니다. 속성 값은 상관없습니다.

[att=val]

att 속성의 값이 정확히 "val"인 요소를 나타냅니다.

[att~=val]

att 속성 값이 공백으로 구분된 단어 목록이며, 그 중 하나가 "val"과 정확히 일치하는 요소를 나타냅니다. "val"에 공백이 포함되어 있으면 아무 것도 나타내지 않습니다(단어가 공백으로 구분되기 때문). "val"이 빈 문자열인 경우에도 아무 것도 나타내지 않습니다.

[att|=val]

att 속성이 있고, 값이 정확히 "val"이거나 "val" 바로 뒤에 "-"(U+002D)가 붙어 시작하는 요소를 나타냅니다. 이는 주로 언어 하위 코드 매칭(예: HTML에서 a 요소의 hreflang 속성)에 사용합니다. BCP 47([BCP47]) 및 후속 문서 참조. lang 또는 xml:lang 언어 하위 코드 매칭은 :lang 가상 클래스를 참고하세요.

속성 값은 CSS 식별자 또는 문자열이어야 합니다. [CSS21] 셀렉터에서 속성 이름과 값의 대소문자 구분 여부는 문서 언어에 따라 다릅니다.

h1[title]

span[class="example"]

span[hello="Cleveland"][goodbye="Columbus"]

a[rel~="copyright"] { ... }
a[href="http://www.w3.org/"] { ... }

a[hreflang=fr]

a[hreflang|="en"]

DIALOGUE[character=romeo]
DIALOGUE[character=juliet]

6.3.2. 부분 문자열 매칭 속성 셀렉터

속성 값에서 부분 문자열을 매칭하기 위한 세 가지 추가 속성 셀렉터가 제공됩니다:

[att^=val]

att 속성의 값이 "val" 접두사로 시작하는 요소를 나타냅니다. "val"이 빈 문자열일 경우 해당 셀렉터는 아무 것도 나타내지 않습니다.

[att$=val]

att 속성의 값이 "val" 접미사로 끝나는 요소를 나타냅니다. "val"이 빈 문자열일 경우 해당 셀렉터는 아무 것도 나타내지 않습니다.

[att*=val]

att 속성의 값에 "val" 부분 문자열이 하나 이상 포함된 요소를 나타냅니다. "val"이 빈 문자열일 경우 해당 셀렉터는 아무 것도 나타내지 않습니다.

속성 값은 CSS 식별자 또는 문자열이어야 합니다. [CSS21] 셀렉터에서 속성 이름의 대소문자 구분 여부는 문서 언어에 따라 다릅니다.

object[type^="image/"]

a[href$=".html"]

p[title*="hello"]

6.3.3. 속성 셀렉터와 네임스페이스

속성 셀렉터의 속성 이름은 CSS 정규 이름으로 제공됩니다. 이전에 선언된 네임스페이스 접두사를 네임스페이스 구분자 "|"로 속성 이름 앞에 붙일 수 있습니다. XML 네임스페이스 명세에 따라, 속성에는 기본 네임스페이스가 적용되지 않으므로 네임스페이스 구성 요소가 없는 속성 셀렉터는 네임스페이스가 없는 속성에만 적용됩니다("|attr"과 동등). 네임스페이스 접두사로 별표(*)를 사용하면 속성의 네임스페이스와 상관없이 모든 속성 이름에 일치시킬 수 있습니다.

이전에 선언되지 않은 네임스페이스 접두사가 포함된 속성 이름을 가진 속성 셀렉터는 잘못된 셀렉터입니다.

@namespace foo "http://www.example.com";
[foo|att=val] { color: blue }
[*|att] { color: yellow }
[|att] { color: green }
[att] { color: green }

6.3.4. DTD의 기본 속성 값

속성 셀렉터는 문서 트리 내의 속성 값을 나타냅니다. 문서 트리가 어떻게 구성되는지는 셀렉터의 범위 밖입니다. 일부 문서 형식에서는 DTD 등에서 기본 속성 값을 정의할 수 있지만, 해당 값이 문서 트리에 나타날 때만 속성 셀렉터로 선택할 수 있습니다. 기본 값이 문서 트리에 포함되었는지 여부와 관계없이 셀렉터가 동작하도록 설계해야 합니다.

예를 들어, XML UA는 "외부 subset" DTD를 읽을 수도 있지만 필수는 아니며, "내부 subset"의 기본 속성 값은 반드시 확인해야 합니다. (각 subset 정의는 [XML10] 참조.) UA에 따라 외부 subset DTD의 기본 속성 값이 문서 트리에 나타날 수도, 그렇지 않을 수도 있습니다.

XML 네임스페이스를 인식하는 UA는 해당 네임스페이스에 대한 지식을 이용해 기본 속성 값을 문서에 존재하는 것처럼 처리할 수도 있지만, 필수는 아닙니다. (예를 들어, XHTML UA는 내장된 XHTML DTD 지식을 반드시 사용하지 않아도 됩니다. XML 1.0의 네임스페이스 관련 자세한 내용은 [XML-NAMES] 참조.)

참고: 일반적으로 구현체는 외부 subset을 무시하는 경우가 많습니다. 이는 XML 명세에서 정의된 검증하지 않는(non-validating) 프로세서의 동작과 같습니다.

<!ATTLIST EXAMPLE radix (decimal,octal) "decimal">

EXAMPLE[radix=decimal] { /*... 기본 속성 설정 ...*/ }
EXAMPLE[radix=octal]   { /*... 다른 설정...*/ }

EXAMPLE                { /*... 기본 속성 설정 ...*/ }
EXAMPLE[radix=octal]   { /*... 다른 설정...*/ }

6.4. 클래스 셀렉터

HTML에서는 class 속성을 표현할 때 "마침표"(U+002E, .) 표기법을 ~= 표기법의 대안으로 사용할 수 있습니다. 따라서 HTML에서는 div.value와 div[class~=value]가 동일한 의미입니다. 속성 값은 마침표(.) 바로 뒤에 와야 합니다.

UA가 해당 네임스페이스에서 어떤 속성이 "class" 속성인지 네임스페이스별 지식을 갖고 있다면, XML 문서에서도 마침표(.) 표기법을 사용할 수 있습니다. 네임스페이스별 지식의 예로는 특정 네임스페이스 명세의 기술(prose)이 있습니다(예: SVG 1.1 [SVG11]은 SVG의 class 속성과 UA의 해석 방법을, MathML [MATHML3]은 MathML class 속성을 설명합니다.)

*.pastoral { color: green }  /* class~=pastoral인 모든 요소 */

.pastoral { color: green }  /* class~=pastoral인 모든 요소 */

H1.pastoral { color: green }  /* class~=pastoral인 H1 요소 */

<H1>Not green</H1>
<H1 class="pastoral">Very green</H1>

p.pastoral.marine { color: green }

참고: CSS는 "class" 속성에 상당한 기능을 부여하므로, 저자는 거의 표현이 없는 요소(예: HTML의 DIV, SPAN)를 사용해 "class" 속성만으로 스타일을 지정하는 자체 "문서 언어"를 만들 수도 있습니다. 하지만 문서 언어의 구조적 요소는 일반적으로 의미가 인정되고 받아들여지므로, 저자 정의 클래스만 사용하는 것은 피해야 합니다.

참고: 요소에 여러 개의 class 속성이 있으면, 값을 공백으로 연결한 후 class를 검색해야 합니다. 현재 워킹 그룹은 이러한 상황이 실제로 발생할 수 있는 방법을 알지 못하므로, 이 동작은 본 명세에서 명시적으로 비규범적입니다.

6.5. ID 셀렉터

문서 언어에는 ID 타입으로 선언된 속성이 있을 수 있습니다. ID 타입 속성의 특징은, 적합한 문서에서는 어떤 요소 타입이든 관계없이 두 속성 값이 같을 수 없다는 점입니다. 문서 언어와 관계없이, ID 타입 속성은 해당 요소를 고유하게 식별하는 데 사용됩니다. HTML에서는 모든 ID 속성 이름이 "id"이고, XML에서는 다르게 이름을 지정할 수 있지만, 동일한 제한이 적용됩니다.

문서 언어의 ID 타입 속성은 문서 트리 내 한 요소 인스턴스에 식별자를 할당할 수 있습니다. ID 셀렉터는 "번호 기호"(U+0023, #) 바로 뒤에 CSS 식별자인 ID 값을 씁니다. ID 셀렉터는 해당 ID와 일치하는 식별자를 가진 요소 인스턴스를 나타냅니다.

셀렉터는 UA가 요소의 ID 타입 속성을 인식하는 방법을 명세하지 않습니다. UA는 문서의 DTD를 읽거나, 정보를 하드코딩하거나, 사용자에게 물어볼 수 있습니다.

h1#chapter1

#chapter1

*#z98y

참고: XML 1.0 [XML10]에서는 요소의 ID가 어떤 속성에 있는지 정보가 DTD나 스키마에 있습니다. XML을 파싱할 때 UA가 반드시 DTD를 읽는 것은 아니므로, 요소의 ID를 알지 못할 수 있습니다(하지만 UA가 네임스페이스별 지식을 가지고 해당 네임스페이스의 ID 속성을 알 수 있는 경우도 있음). 스타일 시트 작성자가 UA가 요소의 ID를 모를 것이라고 예상한다면, #p371 대신 일반 속성 셀렉터 [name=p371]을 사용해야 합니다.

요소에 여러 개의 ID 속성이 있다면, ID 셀렉터 목적상 모두 ID로 처리해야 합니다. 이런 상황은 xml:id, DOM, XML DTD, 네임스페이스별 지식이 혼합될 때 발생할 수 있습니다.

6.6. 가상 클래스

가상 클래스(pseudo-class) 개념은 문서 트리 외부 정보나 다른 단순 셀렉터로는 표현할 수 없는 정보를 기준으로 선택할 수 있도록 도입되었습니다.

가상 클래스는 항상 "콜론"(:) 뒤에 가상 클래스 이름이 오고, 필요에 따라 괄호 내 값이 올 수 있습니다.

가상 클래스는 셀렉터 내 모든 단순 셀렉터 시퀀스에 사용할 수 있습니다. 가상 클래스는 단순 셀렉터 시퀀스 어디든, 선행 타입 셀렉터나 범용 셀렉터 뒤(생략 가능)에 올 수 있습니다. 가상 클래스 이름은 대소문자를 구분하지 않습니다. 일부 가상 클래스는 상호 배타적이며, 다른 것들은 동일 요소에 동시에 적용될 수 있습니다. 가상 클래스는 동적으로 변할 수 있으며, 사용자가 문서와 상호작용할 때 요소가 가상 클래스를 획득하거나 잃을 수 있습니다.

6.6.1. 동적 가상 클래스

동적 가상 클래스는 요소의 이름, 속성, 내용이 아닌 다른 특성을 기준으로 분류합니다. 이는 문서 트리에서 유추할 수 없는 특성입니다.

동적 가상 클래스는 문서 소스나 문서 트리에 나타나지 않습니다.

6.6.1.1. 링크 가상 클래스: :link 및 :visited

사용자 에이전트는 미방문 링크와 이미 방문한 링크를 다르게 표시하는 경우가 많습니다. 셀렉터는 :link 및 :visited 가상 클래스를 제공합니다:

• :link 가상 클래스는 아직 방문하지 않은 링크에 적용됩니다.
• :visited 가상 클래스는 사용자가 이미 방문한 링크에 적용됩니다.

일정 시간이 지나면 사용자 에이전트는 방문한 링크를(미방문) ‘:link’ 상태로 되돌릴 수 있습니다.

두 상태는 상호 배타적입니다.

a.external:visited

참고: 스타일 시트 작성자는 :link와 :visited 가상 클래스를 남용하여 사용자의 방문 사이트를 동의 없이 파악할 수 있습니다.

따라서 UA는 모든 링크를 미방문으로 처리하거나, 방문·미방문 링크를 다르게 렌더링하면서도 사용자의 프라이버시를 보호하는 방법을 구현할 수 있습니다.

6.6.1.2. 사용자 동작 가상 클래스: :hover, :active, :focus

인터랙티브 UA는 사용자 동작에 따라 렌더링을 변경할 수 있습니다. 셀렉터는 사용자가 동작 중인 요소를 선택할 수 있는 세 가지 가상 클래스를 제공합니다.

• :hover 가상 클래스는 사용자가 포인팅 장치로 요소를 지정하고 있지만 반드시 활성화하지는 않을 때 적용됩니다. 예를 들어, 시각적 UA는 커서(마우스 포인터)가 요소가 생성한 박스 위에 있을 때 이 가상 클래스를 적용할 수 있습니다. 인터랙티브 미디어를 지원하지 않는 UA는 이 가상 클래스를 지원하지 않아도 됩니다. 일부 적합한 UA는 인터랙티브 미디어를 지원하더라도(예: 호버링을 감지하지 못하는 펜 디바이스) 이 가상 클래스를 지원하지 않을 수 있습니다.
• :active 가상 클래스는 사용자가 요소를 활성화하는 동안 적용됩니다. 예를 들어, 사용자가 마우스 버튼을 눌렀다가 뗄 때까지. 여러 마우스 버튼이 있는 시스템에서는 :active가 기본 또는 기본 활성화 버튼(일반적으로 "왼쪽" 마우스 버튼) 및 그 별칭에만 적용됩니다.
• :focus 가상 클래스는 요소가 포커스를 가질 때(키보드, 마우스 이벤트 등 입력을 받을 때) 적용됩니다.

어떤 요소가 :active 또는 :focus 상태가 될 수 있는지에 대한 제한은 문서 언어 또는 구현에 따라 다를 수 있습니다.

이 가상 클래스들은 상호 배타적이지 않습니다. 하나의 요소가 여러 가상 클래스에 동시에 일치할 수 있습니다.

셀렉터는 :active나 :hover 상태인 요소의 부모도 해당 상태로 간주하는지 정의하지 않습니다.

참고: 만약 :hover 상태가 자식 요소가 포인팅 장치로 지정된 경우에 적용된다면, 포인팅 장치 아래에 있지 않은 요소에도 :hover가 적용될 수 있습니다.

a:link    /* 미방문 링크 */
a:visited /* 방문한 링크 */
a:hover   /* 사용자가 마우스를 올림 */
a:active  /* 활성화된 링크 */

a:focus
a:focus:hover

참고: 하나의 요소가 ‘:visited’와 ‘:active’(또는 ‘:link’와 ‘:active’) 상태에 동시에 있을 수 있습니다.

6.6.2. 타겟 가상 클래스 :target

일부 URI는 리소스 내의 위치를 참조합니다. 이러한 URI는 "번호 기호"(#)와 앵커 식별자(프래그먼트 식별자)로 끝납니다.

프래그먼트 식별자가 있는 URI는 문서 내 특정 요소(타겟 요소)를 링크합니다. 예를 들어, HTML 문서에서 section_2라는 앵커를 가리키는 URI는 다음과 같습니다:

http://example.com/html/top.html#section_2

타겟 요소는 :target 가상 클래스로 표현할 수 있습니다. 문서의 URI에 프래그먼트 식별자가 없으면, 문서에는 타겟 요소가 없습니다.

p.note:target

*:target { color : red }
*:target::before { content : url(target.png) }

6.6.3. 언어 가상 클래스 :lang

문서 언어가 요소의 인간 언어를 결정하는 방법을 지정한다면, 요소의 언어를 기준으로 셀렉터를 작성할 수 있습니다. 예를 들어, HTML [HTML401]에서는 lang 속성, meta 요소, 프로토콜(예: HTTP 헤더) 등의 정보를 조합하여 언어를 결정합니다. XML에서는 xml:lang 속성을 사용하며, 그밖의 문서 언어별 방법이 있을 수 있습니다.

가상 클래스 :lang(C)은 언어 C인 요소를 나타냅니다. 요소가 :lang() 셀렉터에 해당하는지는 오직 요소의 언어 값(필요시 BCP 47 문법으로 정규화)이 식별자 C와 같거나, C 바로 뒤에 "-"(U+002D)가 붙어 시작하는지에 따라 결정합니다. C와 요소의 언어 값 비교는 ASCII 범위 내에서 대소문자를 구분하지 않고 수행합니다. 식별자 C는 유효한 언어 이름일 필요는 없습니다.

C는 유효한 CSS 식별자 [CSS21]여야 하며, 비어 있으면 안 됩니다. (그렇지 않으면 셀렉터가 잘못된 셀렉터가 됩니다.)

참고: 문서와 프로토콜은 BCP 47 [BCP47] 또는 그 후속 표준의 언어 코드를 사용하는 것이 권장되며, XML 기반 문서에서는 "xml:lang" 속성을 통해 언어를 표시하는 것이 좋습니다 [XML10]. "FAQ: 2글자/3글자 언어 코드" 참고.

html:lang(fr-be)
html:lang(de)
:lang(fr-be) > q
:lang(de) > q

:lang(C)과 ‘|=’ 연산자의 차이는 ‘|=’ 연산자는 요소의 특정 속성만 비교하는 반면, :lang(C) 가상 클래스는 UA가 문서의 의미론을 바탕으로 비교한다는 점입니다.

<body lang=fr>
  <p>Je suis français.</p>
</body>

6.6.4. UI 요소 상태 가상 클래스

6.6.4.1. :enabled 및 :disabled 가상 클래스

:enabled 가상 클래스는 활성화(enabled) 상태인 사용자 인터페이스(UI) 요소를 나타냅니다. 이러한 요소에는 비활성화(disabled) 상태가 대응됩니다.

반대로, :disabled 가상 클래스는 비활성화(disabled) 상태인 UI 요소를 나타냅니다. 이러한 요소에는 활성화 상태가 대응됩니다.

활성화 상태, 비활성화 상태, UI 요소가 무엇인지는 언어에 따라 다릅니다. 일반적인 문서에서는 대부분의 요소가 :enabled나 :disabled 어느 쪽에도 해당하지 않습니다.

참고: 사용자가 UI 요소와 상호작용할 수 있는지 여부에 영향을 줄 수 있는 CSS 속성은 :enabled나 :disabled 일치 여부에 영향을 주지 않습니다. 예를 들어, display와 visibility 속성은 요소의 활성/비활성 상태에 영향을 주지 않습니다.

6.6.4.2. :checked 가상 클래스

라디오와 체크박스 요소는 사용자가 토글할 수 있습니다. 일부 메뉴 항목은 사용자가 선택하면 "checked" 상태가 됩니다. 이러한 요소가 "on"으로 토글되면 :checked 가상 클래스가 적용됩니다. :checked 가상 클래스는 동적 성질을 가지며, 사용자 동작에 따라 변경될 수 있지만 문서 내 의미론적 속성의 존재에 기반할 수도 있으므로 모든 미디어에 적용됩니다. 예를 들어, :checked 가상 클래스는 HTML4 selected 및 checked 속성이 있는 요소에 처음 적용됩니다(HTML4 17.2.1절 참고). 하지만 사용자가 "off"로 토글하면 :checked 가상 클래스가 더 이상 적용되지 않습니다.

6.6.4.3. :indeterminate 가상 클래스

6.6.5. 구조적 가상 클래스

셀렉터는 구조적 가상 클래스 개념을 도입하여, 문서 트리에 있지만 다른 단순 셀렉터나 결합자로 표현할 수 없는 추가 정보를 기준으로 선택할 수 있게 합니다.

독립 텍스트 및 기타 비요소 노드는 형제 목록에서 요소의 위치 계산 시 포함되지 않습니다. 인덱스 번호는 1부터 시작합니다.

6.6.5.1. :root 가상 클래스

:root 가상 클래스는 문서의 루트 요소를 나타냅니다. HTML 4에서는 항상 HTML 요소입니다.

6.6.5.2. :nth-child() 가상 클래스

:nth-child(an+b) 가상 클래스 표기법은 문서 트리에서 해당 요소 앞에 an+b-1명의 형제가 있는 요소를 나타냅니다(n은 0 이상 정수). 부모가 없어도 됩니다. a와 b가 0보다 크면, 자식 요소를 a개씩 묶고(마지막 그룹은 나머지) 각 그룹의 b번째 요소를 선택하는 효과가 있습니다. 예를 들어, 테이블의 홀수 행 선택, 단락 텍스트 색상 4개 주기 변경 등을 할 수 있습니다. a, b 값은 정수여야 하며(양수, 음수, 0 가능), 첫 자식의 인덱스는 1입니다.

추가적으로, :nth-child()의 인자로 ‘odd’, ‘even’을 사용할 수 있습니다. ‘odd’는 2n+1과 동일, ‘even’은 2n과 동일한 의미입니다.

:nth-child() 인자는 아래 문법을 따라야 하며, INTEGER는 [0-9]+ 토큰과 일치하고, 나머지 토큰화는 10.2 Lexical scanner에서 설명합니다:

nth
  : S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? |
         ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S*
  ;

tr:nth-child(2n+1) /* HTML 테이블의 홀수 행 선택 */
tr:nth-child(odd)  /* 동일 */
tr:nth-child(2n+0) /* HTML 테이블의 짝수 행 선택 */
tr:nth-child(even) /* 동일 */

/* CSS로 단락 색상 4개 주기 변경 */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }

b 값이 음수일 때는, 식에서 "+" 기호를 생략하며, "-" 기호로 음수임을 표시합니다.

:nth-child(10n-1)  /* 9번째, 19번째, 29번째 등 요소 선택 */
:nth-child(10n+9)  /* 동일 */
:nth-child(10n+-1) /* 문법적으로 잘못되었으므로 무시됨 */

a=0이면 an 부분은 생략할 수 있습니다(b 부분이 이미 생략된 경우 제외). an이 생략되고 b가 0 이상이면 + 기호도 생략할 수 있습니다. 이 경우 문법은 :nth-child(b)로 간단해집니다.

foo:nth-child(0n+5)   /* 부모의 5번째 자식인 foo 요소 */
foo:nth-child(5)      /* 동일 */

a=1 또는 a=-1일 때는 1을 규칙에서 생략할 수 있습니다.

bar:nth-child(1n+0)   /* 모든 bar 요소, 특이성 (0,1,1) */
bar:nth-child(n+0)    /* 동일 */
bar:nth-child(n)      /* 동일 */
bar                   /* 동일하지만 특이성은 (0,0,1)로 더 낮음 */

b=0이면, 매 a번째 요소를 선택합니다. 이 경우 +b 또는 -b 부분은 a 부분이 생략되지 않은 경우 생략할 수 있습니다.

tr:nth-child(2n+0) /* HTML 테이블의 짝수 행 선택 */
tr:nth-child(2n) /* 동일 */

"(" 뒤, ")" 앞, "+" 또는 "-" 양쪽에 공백이 올 수 있습니다.

:nth-child( 3n + 1 )
:nth-child( +3n - 2 )
:nth-child( -n+ 6)
:nth-child( +6 )

:nth-child(3 n)
:nth-child(+ 2n)
:nth-child(+ 2)

a, b가 모두 0이면, 해당 가상 클래스는 문서 트리의 어떤 요소에도 적용되지 않습니다.

a 값은 음수가 될 수 있지만, n≥0인 경우 an+b의 양수 값만 문서 트리의 요소를 나타낼 수 있습니다.

html|tr:nth-child(-n+6)  /* XHTML 테이블의 처음 6개 행 선택 */

6.6.5.3. :nth-last-child() 가상 클래스

:nth-last-child(an+b) 가상 클래스 표기법은 문서 트리에서 해당 요소 뒤에 an+b-1명의 형제가 있는 요소를 나타냅니다(n은 0 또는 양의 정수). 부모가 없어도 됩니다. 인자 문법은 :nth-child() 가상 클래스 문법을 참고하세요. 또한 ‘even’, ‘odd’ 값도 받을 수 있습니다.

tr:nth-last-child(-n+2)    /* HTML 테이블의 마지막 두 행 선택 */

foo:nth-last-child(odd)    /* 부모 요소에서 마지막부터 홀수 번째 foo 요소 모두 선택 */

6.6.5.4. :nth-of-type() 가상 클래스

:nth-of-type(an+b) 가상 클래스 표기법은 문서 트리에서 해당 요소 앞에 같은 확장 요소 이름을 가진 an+b-1명의 형제가 있는 요소를 나타냅니다(n은 0 또는 양의 정수). 부모가 없어도 됩니다. 인자 문법은 :nth-child() 가상 클래스 문법을 참고하세요. 또한 ‘even’, ‘odd’ 값도 받을 수 있습니다.

img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }

6.6.5.5. :nth-last-of-type() 가상 클래스

:nth-last-of-type(an+b) 가상 클래스 표기법은 문서 트리에서 해당 요소 뒤에 같은 확장 요소 이름을 가진 an+b-1명의 형제가 있는 요소를 나타냅니다(n은 0 또는 양의 정수). 부모가 없어도 됩니다. 인자 문법은 :nth-child() 가상 클래스 문법을 참고하세요. 또한 ‘even’, ‘odd’ 값도 받을 수 있습니다.

body > h2:nth-of-type(n+2):nth-last-of-type(n+2)

body > h2:not(:first-of-type):not(:last-of-type)

6.6.5.6. :first-child 가상 클래스

:nth-child(1)과 동일. :first-child 가상 클래스는 형제 목록에서 첫 번째인 요소를 나타냅니다.

div > p:first-child

<p> The last P before the note.</p>
<div class="note">
   <p> The first P inside the note.</p>
</div>

<p> The last P before the note.</p>
<div class="note">
   <h2> Note </h2>
   <p> The first P inside the note.</p>
</div>

* > a:first-child /* 어떤 요소의 첫 자식인 a */
a:first-child /* 동일(a가 루트 요소가 아니라면) */

6.6.5.7. :last-child 가상 클래스

:nth-last-child(1)과 동일. :last-child 가상 클래스는 형제 목록에서 마지막인 요소를 나타냅니다.

ol > li:last-child

6.6.5.8. :first-of-type 가상 클래스

:nth-of-type(1)과 동일. :first-of-type 가상 클래스는 타입별 형제 목록에서 첫 번째인 요소를 나타냅니다.

dl dt:first-of-type

<dl>
 <dt>gigogne</dt>
 <dd>
  <dl>
   <dt>fusée</dt>
   <dd>multistage rocket</dd>
   <dt>table</dt>
   <dd>nest of tables</dd>
  </dl>
 </dd>
</dl>

6.6.5.9. :last-of-type 가상 클래스

:nth-last-of-type(1)과 동일. :last-of-type 가상 클래스는 타입별 형제 목록에서 마지막인 요소를 나타냅니다.

tr > td:last-of-type

6.6.5.10. :only-child 가상 클래스

:only-child 가상 클래스는 형제가 없는 요소를 나타냅니다. :first-child:last-child 또는 :nth-child(1):nth-last-child(1)과 같으나 특이성은 더 낮습니다.

6.6.5.11. :only-of-type 가상 클래스

:only-of-type 가상 클래스는 같은 확장 요소 이름을 가진 형제가 없는 요소를 나타냅니다. :first-of-type:last-of-type 또는 :nth-of-type(1):nth-last-of-type(1)과 같으나 특이성은 더 낮습니다.

6.6.5.12. :empty 가상 클래스

:empty 가상 클래스는 자식이 전혀 없는 요소를 나타냅니다. 문서 트리 기준으로, 데이터 길이가 0보다 큰 요소 노드와 콘텐츠 노드(DOM [DOM-LEVEL-3-CORE] 텍스트 노드, CDATA 노드, 엔티티 참조 등)만 비어있는지 여부에 영향을 미칩니다. 주석, 처리 명령, 기타 노드는 요소가 비어있는지 여부에 영향을 주지 않습니다.

<p></p>

<foo>bar</foo>

<foo><bar>bla</bar></foo>

<foo>this is not <bar>:empty</bar></foo>

6.6.6. 공백

이 섹션은 의도적으로 비워 두었습니다. (이전에는 :contains() 가상 클래스를 정의했습니다.)

6.6.7. 부정 가상 클래스

부정 가상 클래스 :not(X)는 단순 셀렉터(자기 자신은 제외)를 인자로 받는 함수형 표기법입니다. 인자로 주어진 셀렉터에 해당하지 않는 요소를 나타냅니다.

부정은 중첩할 수 없습니다. :not(:not(...))는 잘못된 셀렉터입니다. 또한 가상 요소는 단순 셀렉터가 아니므로 :not()의 인자로 쓸 수 없습니다.

button:not([DISABLED])

*:not(FOO)

html|*:not(:link):not(:visited)

기본 네임스페이스 선언은 부정 가상 클래스의 인자에 영향을 주지 않습니다(단, 인자가 범용 셀렉터 또는 타입 셀렉터인 경우는 예외).

*|*:not(*)

*|*:not(:hover)

참고: :not() 가상 클래스로 쓸모없는 셀렉터도 만들 수 있습니다. 예를 들어 :not(*|*)는 어떤 요소에도 일치하지 않고, foo:not(bar)는 foo와 같지만 특이성만 더 높습니다.

7. 가상 요소

가상 요소는 문서 언어에서 지정한 것 이상의 문서 트리에 대한 추상화를 만듭니다. 예를 들어, 문서 언어는 요소 콘텐츠의 첫 글자, 첫 줄을 접근할 수 있는 메커니즘을 제공하지 않습니다. 가상 요소는 저자가 이런 접근이 불가능한 정보를 참조할 수 있도록 합니다. 가상 요소는 또한 저자가 소스 문서에 존재하지 않는 콘텐츠(예: ::before, ::after 가상 요소로 생성된 콘텐츠 접근 등)를 참조할 수 있게 합니다.

가상 요소는 콜론 두 개(::)와 가상 요소 이름으로 구성됩니다.

이 :: 표기법은 가상 클래스와 가상 요소를 구분하기 위해 본 문서에서 도입되었습니다. 기존 스타일 시트와 호환성을 위해, UA는 CSS 1, 2에서 도입된 기존 단일 콜론 표기도 가상 요소에 대해 허용해야 합니다(:first-line, :first-letter, :before, :after). 이 명세에서 새로 도입된 가상 요소에는 단일 콜론 호환성이 허용되지 않습니다.

셀렉터당 하나의 가상 요소만 올 수 있으며, 있다면 반드시 셀렉터의 대상을 나타내는 단순 셀렉터 시퀀스 뒤에 와야 합니다. 참고: 향후 명세에서는 셀렉터당 여러 가상 요소를 허용할 수 있습니다.

7.1. ::first-line 가상 요소

::first-line 가상 요소는 요소의 첫 번째 형식화된 줄의 내용을 설명합니다.

p::first-line { text-transform: uppercase }

첫 줄의 길이는 페이지 너비, 폰트 크기 등 여러 요인에 따라 다릅니다. 따라서 일반적인 HTML 단락:

<P>This is a somewhat long HTML
paragraph that will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>

줄이 다음과 같이 나누어질 수 있습니다:

THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. The first
line will be identified by a fictional tag
sequence. The other lines will be treated as
ordinary lines in the paragraph.

이 단락은 UA가 ::first-line 가상 태그 시퀀스를 포함하도록 "재작성"할 수 있습니다. 이 가상 태그 시퀀스는 속성 상속 방식을 보여줍니다.

<P><P::first-line> This is a somewhat long HTML
paragraph that </P::first-line> will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>

가상 요소가 실제 요소를 나누면, 원하는 효과는 종종 요소를 닫았다가 다시 여는 가상 태그 시퀀스로 설명할 수 있습니다. 이전 단락에 span 요소가 있으면:

<P><SPAN class="test"> This is a somewhat long HTML
paragraph that will be broken into several
lines.</SPAN> The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>

UA는 ::first-line 가상 태그 시퀀스를 삽입할 때 span의 시작/끝 태그도 시뮬레이션할 수 있습니다.

<P><P::first-line><SPAN class="test"> This is a
somewhat long HTML
paragraph that will </SPAN></P::first-line><SPAN class="test"> be
broken into several
lines.</SPAN> The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>

7.1.1. CSS에서의 첫 형식화된 줄 정의

CSS에서 ::first-line 가상 요소는 블록 박스, 인라인 블록, 테이블 캡션, 테이블 셀 등 블록 계열 컨테이너에 붙었을 때만 효과가 있습니다. 이 경우 컨테이너의 첫 형식화된 줄을 나타냅니다.

요소의 첫 형식화된 줄은 같은 플로우 내 블록 레벨 자식 내부에 있을 수 있습니다(플로팅이나 포지셔닝으로 흐름에서 벗어나지 않은 블록 레벨 자식). 예를 들어, <DIV><P>This line...</P></DIV>에서 DIV의 첫 줄은 P의 첫 줄입니다(P, DIV 모두 블록 레벨이라 가정).

테이블 셀이나 인라인 블록의 첫 줄은 조상 요소의 첫 형식화 줄이 될 수 없습니다. 즉, <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV>에서 DIV의 첫 형식화 줄은 "Hello"가 아닙니다.

참고: 아래 코드에서 p의 첫 줄에는 글자가 없을 수 있습니다(br의 기본 스타일을 가정). "First"라는 단어는 첫 형식화 줄에 있지 않습니다.

UA는 ::first-line 가상 요소의 가상 시작 태그가 가장 안쪽에 있는 블록 레벨 요소 바로 안에 중첩된 것처럼 동작해야 합니다(CSS1, CSS2는 이 경우에 대해 언급하지 않았으므로 저자는 이 동작에 의존하지 마세요). 예를 들어,

<DIV>
  <P>First paragraph</P>
  <P>Second paragraph</P>
</DIV>

의 가상 태그 시퀀스는

<DIV>
  <P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P>
  <P><P::first-line>Second paragraph</P::first-line></P>
</DIV>

::first-line 가상 요소는 인라인 레벨 요소와 유사하지만 특정 제한이 있습니다. ::first-line 가상 요소에 적용되는 CSS 속성은 폰트 속성, 색상 속성, 배경 속성, ‘word-spacing’, ‘letter-spacing’, ‘text-decoration’, ‘text-transform’, ‘line-height’입니다. UA는 다른 속성도 적용할 수 있습니다.

CSS 상속 과정에서, 자식 요소 중 첫 줄에 포함되는 부분은 ::first-line 가상 요소에 적용되는 속성만 ::first-line 가상 요소에서 상속받습니다. 그 외 속성은 첫 줄 가상 요소의 비-가상 부모에서 상속받습니다(자식 요소 중 첫 줄에 포함되지 않은 부분은 항상 자식의 부모에서 상속).

7.2. ::first-letter 가상 요소

::first-letter 가상 요소는 요소의 첫 번째 글자를 나타내며, 해당 줄에서 다른 콘텐츠(예: 이미지나 인라인 테이블 등)가 앞에 오지 않을 경우에만 적용됩니다. ::first-letter 가상 요소는 일반적으로 "이니셜 대문자"나 "드롭캡"과 같은 전형적인 타이포그래피 효과에 사용될 수 있습니다.

구두점(즉, 유니코드에서 "open"(Ps), "close"(Pe), "initial"(Pi), "final"(Pf), "other"(Po) 구두점 클래스에 정의된 문자)이 첫 글자 앞이나 뒤에 올 경우 포함되어야 합니다. [UNICODE]

::first-letter는 첫 글자가 실제로 숫자일 때에도 적용됩니다. 예를 들어 "67 million dollars is a lot of money."에서 "6"에 적용됩니다.

참고: 어떤 경우에는 ::first-letter 가상 요소가 줄에서 첫 번째 비구두점 문자만 포함하는 것보다 더 많은 글자를 포함해야 할 수도 있습니다. 예를 들어, 결합 문자(combining character)는 기본 문자와 함께 유지되어야 합니다. 또한 일부 언어에는 특정 문자 조합 처리에 대한 규칙이 있을 수 있습니다. UA의 ::first-letter 정의에는 최소한 UAX29의 기본 그래프 클러스터가 포함되어야 하며, 필요에 따라 그 이상을 포함할 수 있습니다. 예를 들어 네덜란드어에서는 "ij" 조합이 요소의 처음에 오면 두 글자 모두 ::first-letter 가상 요소에 포함되어야 합니다. [UAX29]

::first-letter를 구성하는 글자가 동일한 요소 내에 있지 않은 경우(예: <p>‘<em>T...의 "‘T") UA는 하나의 요소, 두 요소 모두, 또는 아예 가상 요소를 생성하지 않을 수 있습니다.

마찬가지로, 블록의 첫 글자가 줄의 시작 위치에 있지 않은 경우(예: 양방향 재정렬 등) UA는 가상 요소를 생성하지 않아도 됩니다.

p { color: red; font-size: 12pt }
p::first-letter { color: green; font-size: 200% }
p::first-line { color: blue }

<P>Some text that ends up on two lines</P>

<P>
<P::first-line>
<P::first-letter>
S
</P::first-letter>ome text that
</P::first-line>
ends up on two lines
</P>

첫 글자는 반드시 첫 번째 형식화 줄에 있어야 합니다. 예를 들어 <p><br>First...와 같은 HTML 코드에서는 첫 줄에 글자가 없으므로 ::first-letter는 아무 것도 매칭하지 않습니다(br의 기본 스타일을 가정). 특히 "First"의 "F"에도 적용되지 않습니다.

7.2.1. CSS에서의 적용

CSS에서 ::first-letter 가상 요소는 block, list-item, table-cell, table-caption, inline-block 등 블록 계열 컨테이너에 적용됩니다. 참고: 향후 명세에서는 이 가상 요소가 더 많은 display 타입에 적용될 수 있습니다.

::first-letter 가상 요소는 이러한 모든 요소에 텍스트가 포함되어 있거나, 동일 플로우 내 자손이 텍스트를 포함하고 있을 때 사용할 수 있습니다. UA는 ::first-letter 가상 요소의 가상 시작 태그를 요소의 첫 번째 텍스트 바로 앞에 있는 것처럼 동작해야 하며, 첫 텍스트가 자손에 있어도 마찬가지입니다.

<div>
<p>The first text.

<div>
<p><div::first-letter><p::first-letter>T</...></...>he first text.

CSS에서 테이블 셀이나 인라인 블록의 첫 글자는 조상 요소의 첫 글자가 될 수 없습니다. 즉, <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV>에서 DIV의 첫 글자는 "H"가 아니며, 실제로 DIV는 첫 글자가 없습니다.

요소가 리스트 아이템(display: list-item)이면 ::first-letter는 마커 뒤의 주요 박스에서 첫 글자에 적용됩니다. UA는 list-style-position: inside인 리스트 아이템에는 ::first-letter를 무시할 수 있습니다. 요소에 ::before나 ::after 콘텐츠가 있으면, ::first-letter는 그 콘텐츠를 포함한 요소의 첫 글자에 적용됩니다.

CSS에서 ::first-line 가상 요소는 ‘float’ 속성이 ‘none’일 때 인라인 레벨 요소와 유사하며, 그렇지 않으면 플로팅 요소와 유사합니다. ::first-letter 가상 요소에는 폰트 속성, ‘text-decoration’, ‘text-transform’, ‘letter-spacing’, ‘word-spacing’(적절할 때), ‘line-height’, ‘float’, ‘vertical-align’(‘float’이 ‘none’일 때만), 마진, 패딩, 테두리, 색상, 배경 속성이 적용됩니다. UA는 다른 속성도 적용할 수 있습니다. UA는 타이포그래피적으로 올바른 드롭캡/이니셜 대문자를 렌더링하기 위해 일반 요소와 달리 글자 모양에 따라 line-height, 너비, 높이를 결정할 수 있습니다.

p { line-height: 1.1 }
p::first-letter { font-size: 3em; font-weight: normal }
span { font-weight: bold }
...
<p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br>
Erbarremt over my en mijn benaeuwde vesten<br>
En arme burgery, en op mijn volcx gebed<br>
En dagelix geschrey de bange stad ontzet.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
 <HEAD>
  <TITLE>Drop cap initial letter</TITLE>
  <STYLE type="text/css">
   P               { font-size: 12pt; line-height: 1.2 }
   P::first-letter { font-size: 200%; font-weight: bold; float: left }
   SPAN            { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>The first</SPAN> few words of an article
    in The Economist.</P>
 </BODY>
</HTML>

<P>
<SPAN>
<P::first-letter>
T
</P::first-letter>he first
</SPAN>
few words of an article in the Economist.
</P>

전통적인 드롭캡 서식을 구현하기 위해 UA는 예를 들어 기준선 정렬을 맞추기 위해 폰트 크기를 근사값으로 조정할 수 있습니다. 또한 글리프 윤곽선도 서식에 반영할 수 있습니다.

7.3. 공백

이 섹션은 의도적으로 비워두었습니다. (이전에는 ::selection 가상 요소를 정의했습니다.)

7.4. ::before 및 ::after 가상 요소

::before와 ::after 가상 요소는 요소 콘텐츠 앞뒤에 생성된 콘텐츠를 설명하는 데 사용할 수 있습니다. 자세한 설명은 CSS 2.1 [CSS21]을 참고하세요.

::first-letter와 ::first-line 가상 요소가 ::before 또는 ::after를 사용해 생성된 콘텐츠가 있는 요소에 적용될 때, 생성된 콘텐츠를 포함하여 요소의 첫 글자 또는 첫 줄에 적용됩니다.

8. 결합자

8.1. 하위 결합자

저자는 때때로 셀렉터가 문서 트리에서 다른 요소의 하위 요소를 설명하길 원할 수 있습니다(예: "H1 요소 내에 포함된 EM 요소"). 하위 결합자는 이러한 관계를 표현합니다. 하위 결합자는 두 단순 셀렉터 시퀀스를 구분하는 공백입니다. "A B" 형식의 셀렉터는 임의의 상위 요소 A의 하위 요소인 B를 나타냅니다.

h1 em

<h1>This <span class="myclass">headline
is <em>very</em> important</span></h1>

div * p

div p *[href]

8.2. 자식 결합자

자식 결합자는 두 요소 간의 부모-자식 관계를 설명합니다. 자식 결합자는 ">"(U+003E, >) 문자로 이루어지며, 두 단순 셀렉터 시퀀스를 구분합니다.

body > p

div ol>li p

요소의 첫 번째 자식 선택에 대한 정보는 위의 :first-child 가상 클래스 섹션을 참고하세요.

8.3. 형제 결합자

형제 결합자에는 두 가지가 있습니다: 인접 형제 결합자와 일반 형제 결합자. 두 경우 모두, 요소 인접성 판단 시 비요소 노드(예: 요소 사이의 텍스트)는 무시됩니다.

8.3.1. 인접 형제 결합자

인접 형제 결합자는 "+"(U+002B, +) 문자로 이루어지며, 두 단순 셀렉터 시퀀스를 구분합니다. 두 시퀀스가 나타내는 요소는 문서 트리에서 같은 부모를 가지며, 첫 번째 시퀀스의 요소가 두 번째 시퀀스의 요소 바로 앞에 위치합니다.

math + p

h1.opener + h2

8.3.2. 일반 형제 결합자

일반 형제 결합자는 "~"(U+007E, ~) 문자로 이루어지며, 두 단순 셀렉터 시퀀스를 구분합니다. 두 시퀀스가 나타내는 요소는 문서 트리에서 같은 부모를 가지며, 첫 번째 시퀀스의 요소가 두 번째 시퀀스의 요소 앞에 위치합니다(바로 앞이 아니어도 됨).

h1 ~ pre

<h1>Definition of the function a</h1>
<p>Function a(x) has to be applied to all figures in the table.</p>
<pre>function a(x) = 12x/13.5</pre>

9. 셀렉터 특이성 계산

셀렉터의 특이성(specificity)은 다음과 같이 계산합니다:

• 셀렉터 내의 ID 셀렉터 개수를 센다 (= a)
• 셀렉터 내의 클래스 셀렉터, 속성 셀렉터, 가상 클래스 개수를 센다 (= b)
• 셀렉터 내의 타입 셀렉터와 가상 요소 개수를 센다 (= c)
• 범용 셀렉터는 무시한다

부정 가상 클래스 내부의 셀렉터도 일반 셀렉터처럼 계산하지만, 부정 자체는 가상 클래스로 취급하지 않습니다.

세 숫자 a-b-c를(큰 진법의 숫자 체계로) 연결하면 특이성이 됩니다.

*               /* a=0 b=0 c=0 -> 특이성 =   0 */
LI              /* a=0 b=0 c=1 -> 특이성 =   1 */
UL LI           /* a=0 b=0 c=2 -> 특이성 =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> 특이성 =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> 특이성 =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> 특이성 =  13 */
LI.red.level    /* a=0 b=2 c=1 -> 특이성 =  21 */
#x34y           /* a=1 b=0 c=0 -> 특이성 = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> 특이성 = 101 */

참고: 동일한 단순 셀렉터가 반복되어도 허용되며, 반복될수록 특이성이 증가합니다.

참고: HTML style 속성에 지정된 스타일의 특이성은 CSS 2.1에서 설명합니다. [CSS21].

10. 셀렉터의 문법

10.1. 문법

아래 문법은 셀렉터의 구문을 정의합니다. 전체적으로 LL(1)이며, 일부는 LL(2)입니다(대부분의 UA는 직접 사용하지 않아야 하며, 실제 파싱 규칙을 표현하지는 않습니다). 생성식(production)의 형식은 사람이 읽기 쉽도록 최적화되어 있으며, Yacc([YACC]) 이외의 약식 표기법도 사용합니다:

• *: 0회 이상
• +: 1회 이상
• ?: 0 또는 1회
• |: 대안(alternative) 구분
• [ ]: 그룹화

생산식(production)은 다음과 같습니다:

selectors_group
  : selector [ COMMA S* selector ]*
  ;

selector
  : simple_selector_sequence [ combinator simple_selector_sequence ]*
  ;

combinator
  /* 결합자는 공백으로 둘러싸일 수 있음 */
  : PLUS S* | GREATER S* | TILDE S* | S+
  ;

simple_selector_sequence
  : [ type_selector | universal ]
    [ HASH | class | attrib | pseudo | negation ]*
  | [ HASH | class | attrib | pseudo | negation ]+
  ;

type_selector
  : [ namespace_prefix ]? element_name
  ;

namespace_prefix
  : [ IDENT | '*' ]? '|'
  ;

element_name
  : IDENT
  ;

universal
  : [ namespace_prefix ]? '*'
  ;

class
  : '.' IDENT
  ;

attrib
  : '[' S* [ namespace_prefix ]? IDENT S*
        [ [ PREFIXMATCH |
            SUFFIXMATCH |
            SUBSTRINGMATCH |
            '=' |
            INCLUDES |
            DASHMATCH ] S* [ IDENT | STRING ] S*
        ]? ']'
  ;

pseudo
  /* '::'는 가상 요소, ':'는 가상 클래스 */
  /* 예외: :first-line, :first-letter, :before 및 :after */
  /* 가상 요소는 셀렉터당 하나로 제한되며 */
  /* 항상 마지막 simple_selector_sequence에만 온다 */
  : ':' ':'? [ IDENT | functional_pseudo ]
  ;

functional_pseudo
  : FUNCTION S* expression ')'
  ;

expression
  /* CSS3에서 expression은 식별자, 문자열, */
  /* 또는 "an+b" 형식 */
  : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+
  ;

negation
  : NOT S* negation_arg S* ')'
  ;

negation_arg
  : type_selector | universal | HASH | class | attrib | pseudo
  ;

10.2. 어휘 스캐너

아래는 토크나이저로, Flex([FLEX]) 표기법으로 작성했습니다. 토크나이저는 대소문자를 구분하지 않습니다.

두 번 등장하는 "\377"은 Flex 최신 버전이 처리할 수 있는 최대 문자 번호(10진수 255)입니다. 이는 최대 유니코드/ISO-10646 코드 포인트인 "\4177777"(10진수 1114111)로 읽어야 합니다. [UNICODE]

%option case-insensitive

ident     [-]?{nmstart}{nmchar}*
name      {nmchar}+
nmstart   [_a-z]|{nonascii}|{escape}
nonascii  [^\0-\177]
unicode   \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
escape    {unicode}|\\[^\n\r\f0-9a-f]
nmchar    [_a-z0-9-]|{nonascii}|{escape}
num       [0-9]+|[0-9]*\.[0-9]+
string    {string1}|{string2}
string1   \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\"
string2   \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\'
invalid   {invalid1}|{invalid2}
invalid1  \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*
invalid2  \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*
nl        \n|\r\n|\r|\f
w         [ \t\r\n\f]*

D         d|\\0{0,4}(44|64)(\r\n|[ \t\r\n\f])?
E         e|\\0{0,4}(45|65)(\r\n|[ \t\r\n\f])?
N         n|\\0{0,4}(4e|6e)(\r\n|[ \t\r\n\f])?|\\n
O         o|\\0{0,4}(4f|6f)(\r\n|[ \t\r\n\f])?|\\o
T         t|\\0{0,4}(54|74)(\r\n|[ \t\r\n\f])?|\\t
V         v|\\0{0,4}(58|78)(\r\n|[ \t\r\n\f])?|\\v

%%

[ \t\r\n\f]+     return S;

"~="             return INCLUDES;
"|="             return DASHMATCH;
"^="             return PREFIXMATCH;
"$="             return SUFFIXMATCH;
"*="             return SUBSTRINGMATCH;
{ident}          return IDENT;
{string}         return STRING;
{ident}"("       return FUNCTION;
{num}            return NUMBER;
"#"{name}        return HASH;
{w}"+"           return PLUS;
{w}">"           return GREATER;
{w}","           return COMMA;
{w}"~"           return TILDE;
":"{N}{O}{T}"("  return NOT;
@{ident}         return ATKEYWORD;
{invalid}        return INVALID;
{num}%           return PERCENTAGE;
{num}{ident}     return DIMENSION;
"<!--"           return CDO;
"-->"            return CDC;

\/\*[^*]*\*+([^/*][^*]*\*+)*\/                    /* 주석 무시 */

.                return *yytext;

11. 프로파일

셀렉터를 사용하는 각 명세는 허용 및 제외되는 셀렉터의 부분집합을 정의하고, 해당 부분집합 구성 요소의 지역적 의미를 설명해야 합니다.

비규범적 예시:

h1 a[name]

12. 적합성 및 요구사항

이 섹션은 현재 명세에 대한 적합성을 정의합니다.

특정 장치의 한계로 인해 사용자 에이전트가 본 명세의 일부를 구현하지 못하는 경우(예: 비인터랙티브 사용자 에이전트는 상호작용이 없으므로 동적 가상 클래스를 구현하지 않을 수 있음)라도, 이는 비적합성을 의미하지 않습니다.

셀렉터를 재사용하는 모든 명세는 수용하거나 제외하는 셀렉터 부분집합을 프로파일로 반드시 제시하고, 현재 명세에 추가하는 제약을 설명해야 합니다.

구문 오류로 인해 무효가 될 수 있습니다. 예를 들어, 인식하지 못하는 토큰이나 현재 구문 위치에서 허용되지 않는 토큰이 있으면 무효입니다.

사용자 에이전트는 구문 오류 처리 규칙을 따라야 합니다:

• 선언되지 않은 네임스페이스 접두사가 있는 단순 셀렉터는 무효입니다.
• 무효인 단순 셀렉터, 무효인 결합자, 무효 토큰을 포함하는 셀렉터는 무효입니다.
• 무효 셀렉터를 포함하는 셀렉터 그룹은 전체가 무효입니다.

셀렉터를 재사용하는 명세는 구문 오류를 어떻게 처리할지 정의해야 합니다. (CSS의 경우, 셀렉터가 사용된 전체 규칙을 삭제합니다.)

13. 테스트

이 명세는 사용자 에이전트가 명세에 대한 기본 적합성을 검증할 수 있도록 테스트 스위트를 제공합니다. 이 테스트 스위트는 모든 경우를 망라하지 않으며, 셀렉터의 모든 가능한 조합 사례를 포함하지 않습니다.

14. 감사 목록

CSS 작업 그룹은 수년간 이 명세에 의견을 보내준 모든 분들께 감사드립니다.

특히, 최종 편집 리뷰를 맡아주신 Donna McManus, Justin Baker, Joel Sklar, Molly Ives Brower께 특별한 감사를 전합니다. 또한 마지막 콜 의견과 격려를 보내준 Adam Kuehn, Boris Zbarsky, David Perrell, Elliotte Harold, Matthew Raymond, Ruud Steltenpool, Patrick Garies, Anton Prowse, 그리고 W3C 국제화 작업 그룹에도 감사를 표합니다.

15. 참고문헌

15.1. 규범적 참고문헌

[CSS21]

Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 2011년 6월 7일. W3C 권고. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607

[CSS3NAMESPACE]

Elika J. Etemad. CSS Namespaces Module Level 3. 2011년 9월 29일. W3C 권고. URL: http://www.w3.org/TR/2014/REC-css-namespaces-3-20140320/

[FLEX]

Flex: The Lexical Scanner Generator. 버전 2.3.7, ISBN 1882114213

[UNICODE]

The Unicode Consortium. The Unicode Standard. 2012년. The Unicode Standard, Version 6.2.0(Mountain View, CA: The Unicode Consortium, 2012. ISBN 978-1-936213-07-8)에서 정의됨. 새 버전이 발행될 때마다 업데이트됨. URL: http://www.unicode.org/standard/versions/enumeratedversions.html

[YACC]

S. C. Johnson. YACC - Yet another compiler compiler. Murray Hill. 1975년. 기술 보고서.

15.2. 참고용 참고문헌

[BCP47]

A. Phillips; M. Davis. Tags for Identifying Languages. 2009년 9월. 47. BCP. 현재 RFC 5646으로 표현됨. URL: ftp://ftp.rfc-editor.org/in-notes/bcp/bcp47.txt

[CSS1]

Håkon Wium Lie; Bert Bos. Cascading Style Sheets (CSS1) Level 1 Specification. 2008년 4월 11일. W3C 권고. URL: http://www.w3.org/TR/2008/REC-CSS1-20080411

[DOM-LEVEL-3-CORE]

Gavin Nicol; et al. Document Object Model (DOM) Level 3 Core Specification. 2004년 4월 7일. W3C 권고. URL: http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407

[HTML401]

Dave Raggett; Arnaud Le Hors; Ian Jacobs. HTML 4.01 Specification. 1999년 12월 24일. W3C 권고. URL: http://www.w3.org/TR/1999/REC-html401-19991224

[HTML5]

Ian Hickson; et al. HTML5. 2014년 10월 28일. W3C 권고. URL: http://www.w3.org/TR/2014/REC-html5-20141028/

[MATHML3]

David Carlisle; Patrick Ion; Robert Miner. Mathematical Markup Language (MathML) Version 3.0 2nd Edition. 2014년 4월 10일. W3C 권고. URL: http://www.w3.org/TR/2014/REC-MathML3-20140410/

[STTS3]

Daniel Glazman. Simple Tree Transformation Sheets 3. Electricité de France. 1998년 11월 11일. W3C 제출. URL: http://www.w3.org/TR/NOTE-STTS3

[SVG11]

Erik Dahlström; et al. Scalable Vector Graphics (SVG) 1.1 (Second Edition). 2011년 8월 16일. W3C 권고. URL: http://www.w3.org/TR/2011/REC-SVG11-20110816/

[UAX29]

Mark Davis. Unicode Text Segmentation. 2012년 9월 12일. Unicode Standard Annex #29. URL: http://www.unicode.org/reports/tr29/

[XML-NAMES]

Tim Bray; et al. Namespaces in XML 1.0 (Third Edition). 2009년 12월 8일. W3C 권고. URL: http://www.w3.org/TR/2009/REC-xml-names-20091208/

[XML10]

C. M. Sperberg-McQueen; et al. Extensible Markup Language (XML) 1.0 (Fifth Edition). 2008년 11월 26일. W3C 권고. URL: http://www.w3.org/TR/2008/REC-xml-20081126/

15.3. 변경사항

이전 권고 이후 실질적인 변경사항은 다음과 같습니다:

• 구조적 가상 클래스가 루트 요소에도 매칭되도록 허용함. 회의록 및 테스트 결과를 참고. 테스트케이스 참고.