5 선택자

5.1 패턴 매칭

CSS에서 패턴 매칭 규칙은 문서 트리의 요소에 어떤 스타일 규칙이 적용되는지 결정합니다. 이러한 패턴은 선택자라고 하며, 단순한 요소 이름에서부터 복잡한 컨텍스트 패턴까지 다양할 수 있습니다. 특정 요소에 대해 패턴의 모든 조건이 참이면, 해당 선택자는 해당 요소와 일치합니다.

선택자에서 문서 언어 요소 이름의 대소문자 구분 여부는 문서 언어에 따라 다릅니다. 예를 들어, HTML에서는 요소 이름이 대소문자를 구분하지 않지만, XML에서는 대소문자를 구분합니다.

다음 표는 CSS 2.2 선택자 문법을 요약한 것입니다:

5.2 선택자 문법

단순 선택자는 유형 선택자 또는 범용 선택자이며, 그 뒤에 0개 이상의 속성 선택자, ID 선택자, 또는 의사 클래스가 어떤 순서로든 올 수 있습니다. 단순 선택자는 모든 구성 요소가 일치하면 일치합니다.

참고: CSS 2.2에서 사용된 용어는 CSS3에서 사용된 용어와 다릅니다. 예를 들어, "단순 선택자"는 CSS3에서 CSS 2.2보다 더 작은 선택자 부분을 나타냅니다. CSS3 선택자 모듈 [CSS3SEL]을 참조하세요.

선택자는 하나 이상의 단순 선택자가 조합자로 구분된 체인입니다. 조합자는 공백, ">", "+"입니다. 공백은 조합자와 주변의 단순 선택자 사이에 나타날 수 있습니다.

선택자와 일치하는 문서 트리의 요소를 선택자의 대상이라고 합니다. 단일 단순 선택자로 구성된 선택자는 요구 사항을 충족하는 모든 요소와 일치합니다. 체인에 단순 선택자와 조합자를 추가하면 추가적인 매칭 제약 조건이 부과되므로, 선택자의 대상은 항상 마지막 단순 선택자와 일치하는 요소의 부분 집합입니다.

하나의 의사 요소를 체인의 마지막 단순 선택자에 추가할 수 있으며, 이 경우 스타일 정보는 각 대상의 하위 부분에 적용됩니다.

5.2.1 그룹화

여러 선택자가 동일한 선언을 공유할 경우, 이를 쉼표로 구분된 목록으로 그룹화할 수 있습니다.

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

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

CSS는 또한 여러 선언 및 축약 속성을 포함하여 다른 "축약" 메커니즘도 제공합니다.

5.3 범용 선택자

범용 선택자는 "*"로 작성되며, 모든 요소 유형 이름과 일치합니다. 문서 트리의 단일 요소와 일치합니다.

범용 선택자가 단순 선택자의 유일한 구성 요소가 아닌 경우, "*"는 생략할 수 있습니다. 예:

• *[lang=fr]와 [lang=fr]은 동일합니다.
• *.warning과 .warning은 동일합니다.
• *#myid와 #myid은 동일합니다.

5.4 유형 선택자

유형 선택자는 문서 언어 요소 유형의 이름과 일치합니다. 유형 선택자는 문서 트리에서 해당 요소 유형의 모든 인스턴스와 일치합니다.

h1 { font-family: sans-serif }

5.5 후손 선택자

작성자는 때때로 문서 트리에서 다른 요소의 후손인 요소와 선택자가 일치하도록 하고 싶어할 수 있습니다 (예: "H1 요소에 포함된 EM 요소와 일치"). 후손 선택자는 패턴에서 이러한 관계를 표현합니다. 후손 선택자는 공백으로 구분된 두 개 이상의 선택자로 구성됩니다. "A B" 형식의 후손 선택자는 B 요소가 조상 요소 A의 임의의 후손일 때 일치합니다.

h1 { color: red }
em { color: red }

<H1>This headline is <EM>very</EM> important</H1>

h1 { color: red }
em { color: red }
h1 em { color: blue }

<H1>This <SPAN class="myclass">headline 
is <EM>very</EM> important</SPAN></H1>

div * p 

div p *[href]

5.6 자식 선택자

자식 선택자는 요소가 특정 요소의 자식일 때 일치합니다. 자식 선택자는 ">"로 구분된 두 개 이상의 선택자로 구성됩니다.

body > P { line-height: 1.3 }

div ol>li p

요소의 첫 번째 자식을 선택하는 방법에 대한 정보는 아래의 :first-child 의사 클래스 섹션을 참조하세요.

5.7 인접 형제 선택자

인접 형제 선택자는 다음과 같은 구문을 가집니다: E1 + E2. 여기서 E2는 선택자의 대상입니다. 선택자는 E1과 E2가 문서 트리에서 동일한 부모를 공유하며 E1 바로 뒤에 E2가 올 때 일치합니다. 비-요소 노드(예: 텍스트 노드 및 주석)는 무시됩니다.

math + p { text-indent: 0 } 

h1 + h2 { margin-top: -5mm }   

h1.opener + h2 { margin-top: -5mm }   

5.8 속성 선택자

CSS 2.2는 작성자가 소스 문서에 정의된 특정 속성을 가진 요소와 일치하는 규칙을 지정할 수 있도록 허용합니다.

5.8.1 속성과 속성 값 매칭

속성 선택자는 네 가지 방식으로 일치할 수 있습니다:

[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 의사 클래스를 참조하세요.

속성 값은 식별자 또는 문자열이어야 합니다. 선택자에서 속성 이름과 값의 대소문자 구분 여부는 문서 언어에 따라 다릅니다.

h1[title] { color: blue; }

span[class=example] { color: blue; }

여러 속성 선택자를 사용하여 요소의 여러 속성을 참조하거나 동일한 속성을 여러 번 참조할 수 있습니다.

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

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

*[lang=fr] { display : none }

*[lang|="en"] { color : red }

DIALOGUE[character=romeo] 
     { voice-family: "Laurence Olivier", charles, male }
      
DIALOGUE[character=juliet]  
     { voice-family: "Vivien Leigh", victoria, female }

5.8.2 DTD의 기본 속성 값

매칭은 문서 트리의 속성 값에 대해 이루어집니다. 기본 속성 값은 DTD 또는 다른 곳에서 정의될 수 있지만, 항상 속성 선택자로 선택할 수 있는 것은 아닙니다. 스타일 시트는 기본 값이 문서 트리에 포함되지 않더라도 작동하도록 설계되어야 합니다.

보다 정확히 말하면, UA는 DTD의 "외부 서브셋"을 읽을 수 있지만, 읽을 필요는 없으며, 문서의 "내부 서브셋"에서 기본 속성 값을 찾아야 합니다 ([XML11]에서 이 서브셋의 정의를 참조하세요). UA에 따라, DTD의 외부 서브셋에 정의된 기본 속성 값이 문서 트리에 나타날 수도 있고 나타나지 않을 수도 있습니다.

UA가 XML 네임스페이스를 인식하면 [XMLNAMESPACES], 해당 네임스페이스에 대한 지식을 사용하여 기본 속성 값을 문서에 있는 것처럼 처리할 수 있습니다(필수는 아님). (예: XHTML UA는 XHTML DTD에 대한 내장 지식을 사용할 필요가 없습니다.)

참고로, 일반적으로 구현에서는 외부 서브셋을 무시하는 것을 선택합니다.

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

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

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

5.8.3 클래스 선택자

HTML을 다룰 때 작성자는 class 속성을 나타낼 때 ~= 표기법 대신 점(.) 표기법을 사용할 수 있습니다. 따라서 HTML에서는 div.value와 div[class~=value]가 동일한 의미를 가집니다. 속성 값은 반드시 "점"(.) 바로 뒤에 와야 합니다. 사용자 에이전트는 XML 문서에서 특정 네임스페이스에 대한 지식을 바탕으로 어떤 속성이 "class" 속성인지 결정할 수 있는 경우, 점(.) 표기법을 사용할 수 있습니다. 네임스페이스에 대한 특정 지식의 예로는 특정 네임스페이스에 대한 명세의 기술이 있습니다(예: SVG 1.1 [SVG11]은 SVG "class" 속성과 사용자 에이전트가 이를 해석하는 방법을 설명하며, MathML 3.0 [MATH30]도 MathML "class" 속성을 설명합니다).

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

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

H1.pastoral { color: green }  /* H1 요소에 대해 class~=pastoral */

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

"class" 값의 하위 집합과 일치시키려면 각 값 앞에 "."이 있어야 합니다.

p.marine.pastoral { color: green }

5.9 ID 선택자

문서 언어에는 ID 유형으로 선언된 속성을 포함할 수 있습니다. ID 유형 속성이 특별한 이유는 동일한 값을 가진 두 개의 속성이 존재할 수 없다는 점입니다. 문서 언어에 상관없이, ID 속성은 자신의 요소를 고유하게 식별하는 데 사용될 수 있습니다. HTML에서는 모든 ID 속성이 "id"로 명명되며, XML 애플리케이션은 ID 속성을 다르게 명명할 수 있지만 동일한 제한이 적용됩니다.

문서 언어의 ID 속성은 작성자가 문서 트리의 요소 인스턴스에 식별자를 할당할 수 있도록 합니다. CSS ID 선택자는 식별자를 기준으로 요소 인스턴스와 일치합니다. CSS ID 선택자는 "#" 바로 뒤에 식별자인 ID 값이 포함됩니다.

참고로 CSS는 사용자 에이전트가 요소의 ID 속성을 어떻게 아는지에 대해 명시하지 않습니다. 사용자 에이전트는 예를 들어 문서의 DTD를 읽거나, 정보를 하드코딩하거나, 사용자에게 물어볼 수 있습니다.

h1#chapter1 { text-align: center }

<HEAD>
  <TITLE>Match P</TITLE>
  <STYLE type="text/css">
    *#z98y { letter-spacing: 0.3em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Wide text</P>
</BODY>

<HEAD>
  <TITLE>Match H1 only</TITLE>
  <STYLE type="text/css">
    H1#z98y { letter-spacing: 0.5em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Wide text</P>
</BODY>

ID 선택자는 속성 선택자보다 높은 우선순위를 가집니다. 예를 들어, HTML에서는 #p123 선택자가 [id=p123]보다 캐스케이드 측면에서 더 구체적입니다.

요소에 여러 ID 속성이 있는 경우, ID 선택자 목적상 해당 요소의 모든 ID를 ID로 처리해야 합니다. 이러한 상황은 xml:id [XMLID], DOM3 Core [DOM-LEVEL-3-CORE], XML DTDs [XML11], 및 네임스페이스별 지식을 혼합하여 사용할 때 발생할 수 있습니다.

5.10 의사 요소와 의사 클래스

CSS 2.2에서는 스타일이 일반적으로 문서 트리에서의 요소의 위치를 기반으로 첨부됩니다. 이 간단한 모델은 많은 경우에 충분하지만, 문서 트리 구조로 인해 일부 일반적인 출판 시나리오는 불가능할 수 있습니다. 예를 들어, HTML 4([HTML4] 참조)에서는 단락의 첫 번째 줄을 참조하는 요소가 없으므로, 이를 참조하는 간단한 CSS 선택자는 존재하지 않습니다.

CSS는 의사 요소와 의사 클래스 개념을 도입하여 문서 트리 외부의 정보를 기반으로 형식을 지정할 수 있도록 합니다.

• 의사 요소는 문서 언어에 의해 지정된 것 이상의 문서 트리에 대한 추상을 생성합니다. 예를 들어, 문서 언어는 요소 콘텐츠의 첫 번째 글자나 첫 번째 줄에 접근하는 메커니즘을 제공하지 않습니다. CSS 의사 요소는 스타일 시트 작성자가 이와 같이 접근할 수 없는 정보를 참조할 수 있도록 허용합니다. 의사 요소는 또한 스타일 시트 작성자가 소스 문서에 존재하지 않는 콘텐츠(예: :before와 :after 의사 요소는 생성된 콘텐츠에 접근 가능)를 스타일로 지정할 수 있는 방법을 제공합니다.
• 의사 클래스는 이름, 속성 또는 콘텐츠가 아닌 특성에 따라 요소를 분류합니다. 원칙적으로 문서 트리에서 추론할 수 없는 특성입니다. 의사 클래스는 사용자가 문서와 상호작용하는 동안 요소가 의사 클래스를 획득하거나 잃을 수 있는 동적일 수 있습니다. 예외는 ':first-child'와 ':lang()'입니다. ':first-child'는 문서 트리에서 추론할 수 있으며, ':lang()'은 일부 경우에 문서 트리에서 추론할 수 있습니다.

의사 요소와 의사 클래스는 문서 소스나 문서 트리에 나타나지 않습니다.

의사 클래스는 선택자 어디에나 허용되지만, 의사 요소는 선택자의 마지막 단순 선택자 뒤에만 추가될 수 있습니다.

의사 요소와 의사 클래스 이름은 대소문자를 구분하지 않습니다.

일부 의사 클래스는 상호 배타적이며, 다른 일부는 동일한 요소에 동시에 적용될 수 있습니다. 충돌하는 규칙의 경우, 일반적인 캐스케이딩 순서가 결과를 결정합니다.

5.11 의사 클래스

5.11.1 :first-child 의사 클래스

:first-child 의사 클래스는 어떤 요소의 첫 번째 자식 요소인 요소와 일치합니다.

div > p:first-child { text-indent: 0 }

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

<P> The last P before the note.
<DIV class="note">
   <H2>Note</H2>
   <P> The first P inside the note.
</DIV>

p:first-child em { font-weight : bold }

참고로 익명 박스는 문서 트리의 일부가 아니므로 첫 번째 자식을 계산할 때 포함되지 않습니다.

<P>abc <EM>default</EM> 

다음 두 선택자는 동일합니다:

* > a:first-child   /* 어떤 요소의 첫 번째 자식인 A */
a:first-child       /* 동일 */

5.11.2 링크 의사 클래스: :link및 :visited

사용자 에이전트는 일반적으로 방문하지 않은 링크를 이전에 방문한 링크와 다르게 표시합니다. CSS는 ':link'와 ':visited' 의사 클래스를 제공하여 이를 구별합니다:

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

사용자 에이전트는 특정 시점에 방문한 링크를 (방문하지 않은) ':link' 상태로 되돌릴 수 있습니다.

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

문서 언어는 어떤 요소가 하이퍼링크 소스 앵커인지 결정합니다. 예를 들어, HTML4에서는 링크 의사 클래스가 "href" 속성을 가진 A 요소에 적용됩니다. 따라서 다음 두 CSS 2.2 선언은 유사한 효과를 가집니다:

a:link { color: red }
:link  { color: red }

<A class="external" href="http://out.side/">external link</A>

a.external:visited { color: blue }

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

따라서 사용자 에이전트는 모든 링크를 방문하지 않은 링크로 처리하거나, 방문한 링크와 방문하지 않은 링크를 다르게 렌더링하면서 사용자의 개인 정보를 보호하기 위한 다른 조치를 구현할 수 있습니다. 개인 정보 처리에 대한 자세한 내용은 [P3P]를 참조하세요.

5.11.3 동적 의사 클래스: :hover, :active, 및 :focus

인터랙티브 사용자 에이전트는 때때로 사용자 행동에 반응하여 렌더링을 변경합니다. CSS는 일반적인 경우를 위해 세 가지 의사 클래스를 제공합니다:

• :hover 의사 클래스는 사용자가 요소를 지정하지만(포인팅 장치를 사용하여) 이를 활성화하지 않을 때 적용됩니다. 예를 들어, 시각적 사용자 에이전트는 커서(마우스 포인터)가 요소에 의해 생성된 박스 위로 움직일 때 이 의사 클래스를 적용할 수 있습니다. 인터랙티브 미디어를 지원하지 않는 사용자 에이전트는 이 의사 클래스를 지원할 필요가 없습니다. 인터랙티브 미디어를 지원하는 일부 적합한 사용자 에이전트는 이 의사 클래스를 지원할 수 없을 수도 있습니다(예: 펜 장치).
• :active 의사 클래스는 사용자가 요소를 활성화하는 동안 적용됩니다. 예를 들어, 사용자가 마우스 버튼을 누르고 있는 동안과 해제하는 동안.
• :focus 의사 클래스는 요소가 포커스를 가지는 동안(키보드 이벤트 또는 기타 텍스트 입력 형식을 수용할 때) 적용됩니다.

요소가 여러 의사 클래스와 동시에 일치할 수 있습니다.

CSS는 위 상태 중 어떤 요소가 있을 수 있는지, 또는 상태를 어떻게 진입하고 나가는지를 정의하지 않습니다. 스크립팅은 요소가 사용자 이벤트에 반응할지 여부를 변경할 수 있으며, 다양한 장치와 사용자 에이전트는 요소를 가리키거나 활성화하는 방법이 다를 수 있습니다.

CSS 2.2는 ':active' 또는 ':hover' 상태에 있는 요소의 부모도 해당 상태에 있는지 여부를 정의하지 않습니다.

사용자 에이전트는 의사 클래스 전환으로 인해 현재 표시된 문서를 다시 흐르게 할 필요가 없습니다. 예를 들어, 스타일 시트가 :active 링크의 'font-size'가 비활성 링크보다 크도록 지정할 수 있지만, 이는 사용자가 링크를 선택할 때 문자의 위치가 변경될 수 있으므로, 사용자 에이전트는 해당 스타일 규칙을 무시할 수 있습니다.

a:link    { color: red }    /* 방문하지 않은 링크 */
a:visited { color: blue }   /* 방문한 링크        */
a:hover   { color: yellow } /* 사용자 호버링       */
a:active  { color: lime }   /* 활성 링크          */

a:focus { background: yellow }
a:focus:hover { background: white }

포커스 윤곽선의 표현에 대한 정보는 동적 포커스 윤곽선 섹션을 참조하세요.

5.11.4 언어 의사 클래스: :lang

문서 언어가 요소의 언어를 결정하는 방법을 지정한 경우, CSS에서 요소의 언어를 기준으로 일치하는 선택자를 작성할 수 있습니다. 예를 들어, HTML [HTML4]에서는 언어가 "lang" 속성, META 요소, 그리고 HTTP 헤더와 같은 프로토콜 정보의 조합에 의해 결정됩니다. XML은 xml:lang이라는 속성을 사용하며, 언어를 결정하기 위한 기타 문서 언어별 방법이 있을 수 있습니다.

:lang(C) 의사 클래스는 요소가 C 언어에 있을 때 일치합니다. 일치 여부는 C 식별자가 요소의 언어 값과 동일하거나, 또는 하이픈으로 구분된 하위 문자열인지 여부에 전적으로 의존합니다. 이는 '|=' 연산자가 수행하는 방식과 동일합니다. 요소의 언어 값에 대해 C와의 일치는 ASCII 범위 내에서 대소문자를 구분하지 않고 수행됩니다. C 식별자는 유효한 언어 이름일 필요는 없습니다.

C는 비어 있어서는 안 됩니다.

참고: 문서와 프로토콜은 BCP 47 [BCP47] 또는 그 후속 표준의 코드를 사용하여 언어를 나타내고, XML 기반 문서의 경우 "xml:lang" 속성을 통해 언어를 나타내는 것이 권장됩니다. "FAQ: Two-letter or three-letter language codes."를 참조하세요.

html:lang(fr-ca) { quotes: '« ' ' »' }
html:lang(de) { quotes: '»' '«' '\2039' '\203A' }
:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»' '«' '\2039' '\203A' }

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

5.12 의사 요소

의사 요소는 아래 및 다른 곳에서 설명된 예외를 제외하고 CSS에서 실제 요소와 동일하게 동작합니다.

아래 섹션은 ':first-line' 및 ':first-letter'의 모든 경우에 대한 정확한 렌더링을 정의하지 않습니다. CSS의 미래 버전에서 이를 더 정확히 정의할 수 있습니다.

5.12.1 :first-line 의사 요소

:first-line 의사 요소는 단락의 첫 번째 서식화된 줄의 콘텐츠에 특별한 스타일을 적용합니다. 예를 들어:

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

위 규칙은 "모든 단락의 첫 번째 줄의 문자를 대문자로 변경"을 의미합니다. 그러나 "P:first-line" 선택자는 실제 HTML 요소와 일치하지 않습니다. 이는 모든 단락의 시작 부분에 적합한 사용자 에이전트가 삽입하는 의사 요소와 일치합니다.

첫 번째 줄의 길이는 페이지의 너비, 글꼴 크기 등 여러 요인에 따라 달라집니다. 따라서 일반적인 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.

사용자 에이전트는 :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>

사용자 에이전트는 :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>

:first-line 의사 요소는 블록 컨테이너 요소에만 부착될 수 있습니다.

요소의 "첫 번째 서식화된 줄"은 동일한 흐름(즉, 위치가 지정되지 않고 플로트되지 않은 블록 수준 후손) 내의 블록 수준 후손 내부에 발생할 수 있습니다. 예를 들어 <DIV><P>This line...</P></DIV>에서 DIV의 첫 번째 줄은 P의 첫 번째 줄입니다(DIV와 P가 모두 블록 수준이라고 가정).

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

다음 코드 조각의 P의 첫 번째 줄 <p><br>First...는 문자를 포함하지 않습니다(HTML 4에서 BR의 기본 스타일을 가정). "First"라는 단어는 첫 번째 서식화된 줄에 없습니다.

사용자 에이전트는 첫 번째 줄 의사 요소의 가상의 시작 태그가 가장 안쪽의 블록 수준 요소 내부에 중첩된 것처럼 작동해야 합니다. (CSS1 및 CSS2에서는 이 경우에 대해 침묵했으므로 작성자는 이 동작에 의존해서는 안 됩니다.) 다음은 예입니다. 다음 HTML 코드 조각의 가상의 태그 시퀀스:

<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 의사 요소에 적용됩니다: 글꼴 속성, 색상 속성, 배경 속성, '단어 간격', '문자 간격', '텍스트 장식', '텍스트 변환', 및 '줄 높이'. 사용자 에이전트는 다른 속성도 적용할 수 있습니다.

5.12.2 :first-letter :first-letter 의사 요소

:first-letter 의사 요소는 블록 첫 번째 줄의 첫 번째 글자를 선택해야 하며, 같은 줄에 이미지나 인라인 테이블과 같은 다른 콘텐츠가 없을 경우에만 적용됩니다. :first-letter 의사 요소는 "대문자"와 "드롭 캡"과 같은 일반적인 타이포그래피 효과에 사용될 수 있습니다. 이러한 초기 글자는 'float' 속성이 'none'일 경우 인라인 수준 요소와 유사하며, 그렇지 않을 경우 플로팅 요소와 유사합니다.

:first-letter 의사 요소에 적용되는 속성은 다음과 같습니다: 글꼴 속성, 'text-decoration', 'text-transform', 'letter-spacing', 'word-spacing' (적절한 경우), 'line-height', 'float', 'vertical-align' ('float' 속성이 'none'일 경우에만), 마진 속성, 패딩 속성, 테두리 속성, 색상 속성, 배경 속성. 사용자 에이전트(UAs)는 다른 속성도 적용할 수 있습니다. 타이포그래피적으로 정확한 드롭 캡이나 초기 대문자를 렌더링하기 위해, UA는 일반 요소와 달리 글자의 모양에 근거하여 줄 높이, 너비 및 높이를 선택할 수 있습니다. CSS3에서는 first-letter에 적용되는 특정 속성을 포함할 것으로 예상됩니다.

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>드롭 캡 초기 글자</TITLE>
  <STYLE type="text/css">
   P              { font-size: 12pt; line-height: 1.2 }
   P:first-letter { font-size: 200%; font-style: italic;
                    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>

전통적 드롭 캡 포맷을 구현하기 위해, 사용자 에이전트는 예를 들어 베이스라인을 맞추기 위해 글꼴 크기를 근사화할 수 있습니다. 또한, 서체 윤곽선이 포맷에 고려될 수 있습니다.

첫 글자 앞뒤에 오는 구두점(예: Unicode [UNICODE]의 "open"(Ps), "close"(Pe), "initial"(Pi), "final"(Pf), "other"(Po) 구두점 클래스에 정의된 문자)은 포함되어야 합니다. 예:

':first-letter'는 첫 글자가 실제로 숫자인 경우에도 적용됩니다. 예: "67 million dollars is a lot of money."에서 "6".

:first-letter 의사 요소는 블록 컨테이너 요소에 적용됩니다.

:first-letter 의사 요소는 텍스트를 포함하거나, 동일한 흐름 내에서 텍스트를 포함하는 하위 요소를 가진 모든 요소에 사용할 수 있습니다. 사용자 에이전트는 첫 글자 의사 요소의 가상 시작 태그가 해당 요소의 첫 번째 텍스트 바로 앞에 있는 것처럼 작동해야 하며, 첫 번째 텍스트가 하위 요소에 있는 경우에도 그렇습니다.

<div>
<p>The first text.

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

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

첫 글자는 첫 번째 포맷된 줄에 나타나야 합니다. 예를 들어, <p><br>First... 조각에서는 첫 번째 줄에 글자가 없기 때문에 ':first-letter'는 아무것도 일치하지 않으며 (HTML 4에서 BR의 기본 스타일을 가정), 특히 "First."의 "F"와 일치하지 않습니다.

요소가 목록 항목 ('display: list-item')인 경우, ':first-letter'는 마커 뒤의 주요 박스에서 첫 글자에 적용됩니다. 사용자 에이전트는 'list-style-position: inside'가 있는 목록 항목의 ':first-letter'를 무시할 수도 있습니다. 요소에 ':before' 또는 ':after' 콘텐츠가 있는 경우 ':first-letter'는 해당 콘텐츠를 포함하여 요소의 첫 글자에 적용됩니다.

예를 들어, 규칙 'p:before {content: "Note: "}' 이후에 선택자 'p:first-letter'는 "Note"의 "N"과 일치합니다.

일부 언어는 특정 문자 조합을 처리하는 방법에 대해 특정 규칙을 가질 수 있습니다. 예를 들어, 네덜란드어에서는 단어의 시작 부분에 "ij" 문자 조합이 나타나는 경우 두 글자가 모두 :first-letter 의사 요소에 포함되어야 합니다.

첫 글자를 구성하는 문자가 동일한 요소에 없는 경우, 예를 들어 <p>'<em>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>

5.12.3 :before 및 :before와 :after 의사 요소

':before' 및 ':after' 의사 요소는 요소의 콘텐츠 앞이나 뒤에 생성된 콘텐츠를 삽입하는 데 사용할 수 있습니다. 이는 생성된 텍스트 섹션에서 설명됩니다.

h1:before {content: counter(chapno, upper-roman) ". "}

:first-letter 및 :first-line 의사 요소가 :before 및 :after를 사용하여 생성된 콘텐츠를 가진 요소에 적용될 때, 이들은 생성된 콘텐츠를 포함한 요소의 첫 번째 글자나 줄에 적용됩니다.

p.special:before {content: "Special! "}
p.special:first-letter {color: #ffd800}