CSS 의사 요소 모듈 레벨 4

1. 소개

이 섹션은 안내용입니다.

의사 요소는 문서 언어로 명시적으로 생성된 요소를 넘어서는 문서의 추상적 요소를 나타냅니다. 이들은 문서 트리에 맞추는 제약을 받지 않기 때문에, 문서의 트리 구조와 반드시 대응하지 않는 부분을 선택하고 스타일링하는 데 사용할 수 있습니다. 예를 들어, ::first-line 의사 요소는 텍스트 줄바꿈 이후 요소의 첫 번째 형식화된 줄에 있는 콘텐츠를 선택할 수 있어, 그 줄만 나머지 단락과 다르게 스타일링할 수 있습니다.

각 의사 요소는 기원 요소와 연결되며, ::이름 형태의 구문을 가집니다. 이 모듈은 CSS에 존재하는 의사 요소와 그것들을 어떻게 스타일링할 수 있는지 정의합니다. 의사 요소 전반에 대한 더 자세한 정보와 구문, 다른 셀렉터와의 상호작용은 [SELECTORS-4]를 참고하세요.

참고: 의사 요소는 명시적으로 허용된 경우가 아니면 서로 연결해서 사용할 수 없습니다. 예를 들어, ::marker::before는 허용되지 않지만, ::before::marker는 허용됩니다.

2. 타이포그래픽 의사 요소

2.1. 첫 번째 줄 텍스트: ::first-line 의사 요소

::first-line 의사 요소는 자신의 첫 번째 형식화된 줄에 해당하는 기원 요소의 콘텐츠를 나타냅니다.

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

참고: 첫 번째 줄의 길이는 페이지의 너비, 폰트 크기 등 여러 요인에 따라 달라집니다.

<P>This is a somewhat long HTML paragraph
that will be broken into several lines.
The first line will be styled
by the ‘::first-line’ pseudo-element.
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 styled by the ‘::first-line’
pseudo-element. The other lines will be 
treated as ordinary lines in the paragraph.

THIS IS A SOMEWHAT LONG
HTML paragraph that will
be broken into several
lines. The first line will
be styled by the
‘::first-line’ pseudo-
element. The other lines
will be treated as ordinary
lines in the paragraph.

2.1.1. 첫 번째 형식화된 줄 찾기

CSS에서 ::first-line 의사 요소는 블록 컨테이너에 연결될 때만 효과가 있습니다:

• 첫 번째 포매팅 라인(first formatted line)은 블록 컨테이너가 인라인 포매팅 컨텍스트를 생성할 때, 그 첫 번째 라인 박스(line box)의 인라인 레벨 콘텐츠를 나타냅니다.

• 첫 번째 형식화된 줄은 블록 컨테이너 또는 다단 컨테이너가 블록 레벨 콘텐츠를 포함하고 (테이블 래퍼 박스가 아닐 때) 그 첫 번째 in-flow 블록 레벨 자식의 첫 번째 형식화된 줄입니다. 해당 줄이 존재하지 않으면, 첫 번째 형식화된 줄이 없습니다.

참고: 첫 번째 형식화된 줄은 빈 줄일 수 있습니다. 예를 들어, p의 첫 줄이 <p><br>First…인 경우 첫 줄에는 아무 글자가 없습니다. 따라서 "First"라는 단어는 첫 번째 형식화된 줄에 포함되지 않으며, p::first-line의 영향을 받지 않습니다.

참고: 블록 컨테이너가 스스로 블록 포매팅 컨텍스트에 참여하지 않는 경우 그 첫 줄은 상위 요소의 첫 번째 형식화된 줄이 될 수 없습니다. 예를 들어, <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> 에서는 DIV의 첫 번째 형식화된 줄이 "Hello"가 아니라, 해당 인라인 블록 전체를 포함하는 줄이 됩니다.

첫 번째 형식화된 줄이 여러 ::first-line 의사 요소로 표현될 때, 이들은 기원 요소의 순서대로 중첩됩니다. 해당 줄의 인라인 레벨 콘텐츠—​해당 루트 인라인 박스 단편 포함—​은 가장 안쪽 ::first-line 의사 요소 안에 중첩됩니다.

<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>

2.1.2. ::first-line 의사 요소 스타일링

::first-line 의사 요소가 생성하는 박스는 인라인 레벨 박스와 유사하게 동작하지만, 일부 제한이 있습니다. 다음 CSS 속성들이 ::first-line 의사 요소에 적용됩니다:

• 모든 폰트 속성 ([CSS-FONTS-4] 참고)
• color 및 opacity 속성 ([CSS-COLOR-4] 참고)
• 모든 배경 속성 ([CSS-BACKGROUNDS-3] 참고)
• 인라인 요소에 적용되는 조판 속성 ([CSS-TEXT-4] 참고)
• 모든 텍스트 장식 속성 ([CSS-TEXT-DECOR-4] 참고)
• ruby-position 속성 ([CSS-RUBY-1] 참고)
• 인라인 요소에 적용되는 인라인 레이아웃 속성 ([CSS-INLINE-3] 참고)
• 각 명세에서 ::first-line에 적용된다고 정의한 기타 속성

사용자 에이전트는 아래에서 제외하는 속성을 제외하고, 다른 속성을 적용할 수도 있습니다:

• writing-mode
• direction
• text-orientation

참고: line-height를 ::first-line에 설정하면, 첫 번째 줄 내용을 감싸는 루트 인라인 박스 단편에도 상속되기 때문에, 첫 번째 줄 박스의 높이를 늘리거나 줄일 수 있습니다.

2.1.3. 상속과 ::first-line 의사 요소

CSS 상속 과정에서, 첫 번째 줄에 위치한 자식의 단편은 위에서 제외한 속성을 제외한 표준 상속 속성을 ::first-line 의사 요소로부터 상속받습니다. 그 외의 모든 속성(모든 사용자 속성 포함 [CSS-VARIABLES-1]), 상속은 비의사 부모에서 이루어집니다. (자식 요소의 첫 번째 줄이 아닌 부분은 항상 비의사 부모에서 상속받습니다.)

<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 styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</p>

<p><p::first-line>This is a somewhat long</p::first-line> HTML paragraph
that will be broken into several lines.
The first line will be styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</p>

<p><span>This is a somewhat long HTML paragraph
that will be broken into several lines.</span>
The first line will be styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</p>

<p><p::first-line><span>This is a somewhat long HTML paragraph
that</span></p::first-line><span> will be broken into several lines.</span>
The first line will be styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</p>

2.2. 첫 글자 텍스트: ::first-letter 의사 요소 및 그 ::prefix, ::suffix 자식들

::first-letter 의사 요소는 타이포그래픽 문자 단위 중 첫 번째 글자, 숫자, 또는 기호 (유니코드 범주 L*, N*, S*)를 자신의 첫 번째 형식화된 줄의 기원 요소에서 나타냅니다(즉, 첫 글자). 그리고 이에 연관된 구두점도 포함합니다. 이 텍스트 전체를 첫 글자 텍스트라고 합니다. ::first-letter 의사 요소는 "이니셜 캡(initial caps)"과 "드롭캡(drop caps)" 같은 일반적인 타이포그래픽 효과를 구현하는 데 사용할 수 있습니다.

h2 + p::first-letter { initial-letter: 3; }

참고: 첫 글자는 실제로 숫자일 수도 있습니다. 예를 들어 “67 million dollars is a lot of money.”에서 "6"이 첫 글자입니다.

첫 글자 자체와 인접 구두점을 각각 독립적으로 스타일링할 수 있도록, 앞에 오는 연관 구두점은 ::prefix 하위 의사 요소(sub-pseudo-element)로 ::first-letter 의사 요소 안에서 표현합니다(::first-letter::prefix). 뒤에 오는 연관 구두점은 ::suffix 하위 의사 요소로 ::first-letter 의사 요소 안에서 표현합니다(::first-letter::suffix). 자세한 내용은 아래 § 2.2.1 첫 글자 및 연관 구두점을 참고하세요.

2.2.1. 첫 글자 및 연관 구두점

CSS Text 3 § 1.4 문자와 글자에서 설명한 대로, 타이포그래픽 문자 단위는 하나 이상의 유니코드 코드포인트를 포함할 수 있습니다. 예를 들어, 조합 문자(combining character)는 반드시 기본 문자와 함께 처리해야 합니다. 또한 언어마다 특정 글자 조합을 어떻게 다룰지에 대한 추가 규칙이 있을 수 있습니다. 예를 들어 네덜란드어에서는 "ij" 글자 조합이 요소의 처음에 오면, 두 글자 모두 ::first-letter 의사 요소 내에 포함되어야 합니다. [UAX29] 첫 글자를 선택할 때, UA는 타이포그래픽 문자 단위의 정의를 ::first-letter 의사 요소의 포함 블록의 콘텐츠 언어의 첫 글자 관례에 맞춰 조정해야 합니다.

앞뒤 구두점도 첫 글자 텍스트의 일부로 ::first-letter 의사 요소 내에 아래와 같이 포함되어야 합니다:

• 모든 구두점, 즉 Punctuation(P*) 유니코드 일반 범주([UAX44])에 속하며 첫 글자 앞에 위치한 모든 문자, 그리고 그 사이에 있는 타이포그래픽 공백(유니코드 Zs 일반 범주에 속하는 문자, 단 U+3000 한자 공백 제외).
• 첫 글자 뒤에 오는 구두점 중 열림 구두점, 대시 제외(즉, Punctuation(P*) 범주이면서 Open Punctuation(Ps), Dash Punctuation(Pd)은 제외), 그리고 그 사이에 있는 타이포그래픽 공백(유니코드 Zs 일반 범주, 단 U+3000 한자 공백이나 단어 구분자는 제외).

CSS Text 3 § 1.4 문자와 글자 및 CSS Text 3 § E 문자와 속성에서 타이포그래픽 문자 단위와 유니코드 속성에 대한 자세한 정보를 확인할 수 있습니다. [CSS-TEXT-3]

2.2.2. 첫 글자 텍스트 찾기

::first-line과 마찬가지로, ::first-letter 의사 요소는 블록 컨테이너에 연결될 때만 효과가 있습니다. 해당 첫 글자 텍스트는 인라인 레벨 콘텐츠 중 인라인 포매팅 컨텍스트에 참여하는 것 중 기원 요소의 첫 번째 형식화된 줄에 처음 등장하는 것이며, 해당 줄에 다른 인플로우 콘텐츠(예: 이미지, 인라인 테이블 등)가 앞서 있지 않은 경우에만 해당됩니다.

이때 마커 박스는 인플로우가 아닌 것처럼 무시됩니다. 단, 요소에 인플로우 ::before 또는 ::after 콘텐츠가 있으면, 첫 글자 텍스트는 해당 요소의 콘텐츠(생성된 콘텐츠 포함)에서 선택됩니다.

자격이 되는 텍스트가 없다면, 첫 글자 텍스트 및 ::first-letter 의사 요소도 존재하지 않습니다.

참고: 첫 번째 형식화된 줄이 비어 있으면 ::first-letter는 아무것도 일치하지 않습니다. 예를 들어 <p><br>First...처럼 첫 줄에 글자가 없으므로, ::first-letter는 아무것도 매칭하지 않습니다. 특히 "First"의 "F"는 두 번째 줄에 있으므로 일치하지 않습니다.

참고: ::first-line과 마찬가지로, 첫 글자 텍스트는 블록 컨테이너가 블록 포매팅 컨텍스트에 참여하지 않으면 상위 요소의 첫 글자 텍스트가 될 수 없습니다. 즉, <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> 에서 DIV의 첫 글자는 "H"가 아닙니다. 실제로 DIV는 첫 글자가 없습니다.

첫 글자 텍스트의 일부가 줄 바꿈으로 다음 줄로 넘어가면, 더 이상 ::first-letter 의사 요소의 일부가 아닙니다.

2.2.3. 첫 글자 의사 요소의 상속과 박스 트리 구조

::first-letter 의사 요소는 자신이 나타내는 첫 글자 텍스트 바로 바깥에 래핑됩니다. 이 텍스트가 하위 요소 내에 있더라도 마찬가지입니다. 첫 글자 텍스트가 여러 ::first-letter 의사 요소로 표현될 경우, 기원 요소의 순서대로 중첩됩니다. 상속도 이에 맞게 동작합니다.

<div>
  <p><span>The first few words</span>
  and the rest of the paragraph.
</div>

<div>
  <p><span><div::first-letter><p::first-letter>T</…></…>he first few words</span>
  and the rest of the paragraph.
</div>

::first-letter::prefix나 ::first-letter::suffix 의사 요소가 있으면, 이들은 가장 안쪽 ::first-letter 안에 중첩되며, 그 외에는 ::first-letter와 유사하게 해석됩니다.

<div>
  <p><span>“The first few words</span>
  and the rest of the quotation.
</div>

<div>
  <p><span><div::first-letter><p::first-letter><div::first-letter::prefix><p::first-letter::prefix>“</…></…>T</…></…>he first few words</span>
  and the rest of the paragraph.
</div>

첫 글자 텍스트를 구성하는 문자가 모두 같은 요소에 있지 않으면 (예: ‘T가 <p>‘<em>T...처럼), UA는 ::first-letter 의사 요소 (및 ::prefix 또는 ::suffix 하위 요소) 를 한 요소 혹은 모든 요소에서 생성하거나, 아예 생성하지 않을 수도 있습니다. 또한 첫 글자 텍스트가 줄의 처음이 아닌 경우 (예: 양방향 재정렬, 목록 아이템 마커에 list-style-position: inside 지정 등), UA는 해당 의사 요소를 생성할 필요가 없습니다.

::first-letter 의사 요소는 모든 ::first-line 의사 요소 안에 포함되며, 따라서 (잠재적으로 간접적으로) ::first-line에서 상속받으며, 같은 줄의 인라인 박스와 동일하게 취급됩니다.

2.2.4. 첫 글자 의사 요소 스타일링

CSS에서 ::first-letter 의사 요소 (및 ::prefix, ::suffix 하위 요소) 는 인라인 박스와 유사합니다. 다음 속성들은 ::first-letter, ::first-letter::prefix, ::first-letter::suffix 의사 요소에 적용됩니다:

• 모든 폰트 속성 ([CSS-FONTS-4] 참고)
• color 및 opacity 속성 ([CSS-COLOR-4] 참고)
• 모든 배경 속성 ([CSS-BACKGROUNDS-4] 참고)
• 인라인 요소에 적용되는 조판 속성 ([CSS-TEXT-4] 참고)
• 모든 텍스트 장식 속성 ([CSS-TEXT-DECOR-4] 참고)
• 인라인 요소에 적용되는 인라인 레이아웃 속성 ([CSS-INLINE-3] 참고)
• 마진 및 패딩 속성 ([CSS22] 참고)
• 테두리 속성 및 box-shadow ([CSS-BACKGROUNDS-4] 참고)
• 각 명세에서 ::first-letter에 적용된다고 정의한 기타 속성

UA는 다른 속성도 적용할 수 있습니다. 단, ::first-letter에 미기재 속성을 적용하더라도 해당 ::first-letter가 나타내는 첫 글자 텍스트가 달라지면 안 됩니다.

참고: 예전 CSS 레벨에서는 UA가 글자의 형태에 따라 줄 높이, 너비, 높이를 선택하거나 폰트 크기를 근사하여, 글리프 윤곽을 레이아웃 시 반영할 수 있었습니다. 이런 느슨하게 정의된 마법적 동작은 드롭캡과 레이즈드 캡스 같은 실제 용도에 적합하지 않고 상호운용성 문제를 일으켜, 의도적으로 제거되었습니다. 드롭캡과 레이즈드 캡스의 명확한 처리는 initial-letter ([CSS-INLINE-3]) 참고.

3. 하이라이트 의사 요소

3.1. 하이라이트된 콘텐츠 선택: ::selection, ::search-text, ::target-text, ::spelling-error, ::grammar-error, ::highlight() 의사 요소

하이라이트 의사 요소는 문서의 특정 상태가 부여된 부분을 나타내며, 일반적으로 그 상태를 사용자에게 알리기 위해 다르게 스타일링됩니다. 예를 들어, 문서에서 선택된 부분은 보통 하이라이트되어 (배경과 전경색 변경 또는 색상 워시 등) 선택된 상태임을 표시합니다. 아래와 같은 하이라이트 의사 요소들이 정의되어 있습니다:

::selection

::selection 의사 요소는 문서에서 선택되어 향후 사용자 에이전트의 작업 대상이 될 수 있는 부분을 나타냅니다. 예를 들어, 편집 가능한 텍스트 필드 내에서 선택된 텍스트에 적용되며, 복사 작업 시 복사되거나 붙여넣기 작업 시 교체될 수 있습니다.

테스트

• active-selection-001-manual.html (manual test) (소스)
• active-selection-002-manual.html (manual test) (소스)
• active-selection-004-manual.html (manual test) (소스)
• active-selection-011.html (실시간 테스트) (소스)
• active-selection-012.html (실시간 테스트) (소스)
• active-selection-014.html (실시간 테스트) (소스)
• active-selection-016.html (실시간 테스트) (소스)
• active-selection-018.html (실시간 테스트) (소스)
• active-selection-025.html (실시간 테스트) (소스)
• active-selection-027.html (실시간 테스트) (소스)
• active-selection-056.html (실시간 테스트) (소스)
• active-selection-057.html (실시간 테스트) (소스)
• active-selection-063.html (실시간 테스트) (소스)
• selection-background-color-001.html (실시간 테스트) (소스)
• selection-link-001.html (실시간 테스트) (소스)
• selection-link-002.html (실시간 테스트) (소스)
• selection-link-003.html (실시간 테스트) (소스)
• selection-over-highlight-001.html (실시간 테스트) (소스)
• selection-universal-shadow-dom.html (실시간 테스트) (소스)
• selection-contenteditable-011.html (실시간 테스트) (소스)
• selection-input-011.html (실시간 테스트) (소스)
• selection-textarea-011.html (실시간 테스트) (소스)
• textpath-selection-011.html (실시간 테스트) (소스)

::search-text

::search-text 의사 요소는 사용자 에이전트의 페이지 내 찾기 기능으로 식별된 텍스트를 나타냅니다. 모든 UA가 하이라이트 의사 요소로 표현 가능한 방식으로 일치 텍스트를 스타일링하는 것은 아니므로, 이 의사 요소는 선택적으로 구현해도 됩니다.

:current 의사 클래스(pseudo-class, ::current()은 아님)는 ::search-text와 조합해 현재 포커스된 검색 결과 인스턴스를 표현할 수 있습니다. :past와 :future 의사 클래스는 추후 유사한 용도를 위해 예약되어 있습니다. 지원되지 않는 이러한 의사 클래스와 ::search-text의 조합은 반드시 무효로 처리해야 합니다.

::target-text

::target-text 의사 요소는 문서 URL의 fragment에 의해 직접적으로 타겟팅된 텍스트를 나타냅니다.

참고: URL fragment가 요소를 타겟팅할 때, :target 의사 요소로 해당 요소를 선택할 수 있지만, ::target-text는 아무것도 일치하지 않습니다. 이 의사 요소는 오직 [fragment]에 의해 직접적으로 타겟팅된 텍스트에만 일치합니다.

테스트

• target-text-001.html (실시간 테스트) (소스)
• target-text-002.html (실시간 테스트) (소스)
• target-text-003.html (실시간 테스트) (소스)
• target-text-004.html (실시간 테스트) (소스)
• target-text-005.html (실시간 테스트) (소스)
• target-text-006.html (실시간 테스트) (소스)
• target-text-007.html (실시간 테스트) (소스)
• target-text-008.html (실시간 테스트) (소스)
• target-text-009.html (실시간 테스트) (소스)
• target-text-010.html (실시간 테스트) (소스)
• target-text-dynamic-001.html (실시간 테스트) (소스)
• target-text-dynamic-002.html (실시간 테스트) (소스)
• target-text-dynamic-003.html (실시간 테스트) (소스)
• target-text-dynamic-004.html (실시간 테스트) (소스)
• target-text-shadow-horizontal.html (실시간 테스트) (소스)
• target-text-shadow-vertical.html (실시간 테스트) (소스)
• target-text-text-decoration-001.html (실시간 테스트) (소스)

::spelling-error

::spelling-error 의사 요소는 사용자 에이전트에 의해 잘못 입력된 것으로 표시된 텍스트 부분을 나타냅니다.

테스트

• spelling-error-001.html (실시간 테스트) (소스)
• spelling-error-002-manual.html (manual test) (소스)
• spelling-error-003-manual.html (manual test) (소스)
• spelling-error-004-crash.html (실시간 테스트) (소스)
• spelling-error-005-crash.html (실시간 테스트) (소스)
• spelling-error-006.html (실시간 테스트) (소스)

::grammar-error

::grammar-error 의사 요소는 사용자 에이전트에 의해 문법적으로 올바르지 않은 것으로 표시된 텍스트 부분을 나타냅니다.

테스트

• grammar-error-001.html (실시간 테스트) (소스)
• grammar-error-002-manual.html (manual test) (소스)
• grammar-error-003-manual.html (manual test) (소스)

::highlight(<custom-ident>)

::highlight() 함수형 의사 요소는 주어진 사용자 지정 하이라이트와 연관된 문서의 부분을 나타냅니다. 이 부분은 지정된 사용자 지정 하이라이트 이름으로 식별됩니다. <custom-ident> 인자는 필수입니다. 자세한 내용은 [CSS-HIGHLIGHT-API-1]를 참고하세요.

하이라이트 의사 요소는 반드시 요소 트리에 포함되지 않으며, 중첩 구조를 따르지 않고 임의로 요소 경계를 넘을 수 있습니다.

3.2. 하이라이트 스타일링

하이라이트 의사 요소는 레이아웃에 영향을 주지 않고, 매우 동적인 환경에서도 성능적으로 적용할 수 있는 제한된 속성 집합만 스타일링할 수 있습니다. 또한(상호운용성을 위해) 필수 영역 내에서의 렌더링이 하이라이트 오버레이의 정확한(UA가 결정하는) 경계에 의존하지 않아야 합니다.

다음 속성들이 하이라이트 의사 요소에 적용됩니다:

• color
  테스트

  • active-selection-001-manual.html (manual test) (소스)
  • active-selection-011.html (실시간 테스트) (소스)
  • active-selection-016.html (실시간 테스트) (소스)
  • active-selection-018.html (실시간 테스트) (소스)
• background-color
  테스트

  • active-selection-002-manual.html (manual test) (소스)
  • active-selection-012.html (실시간 테스트) (소스)
  • active-selection-031.html (실시간 테스트) (소스)
• text-decoration 및 관련 속성들 (text-underline-position과 text-underline-offset 포함)
  테스트

  • active-selection-004-manual.html (manual test) (소스)
  • active-selection-014.html (실시간 테스트) (소스)
  • active-selection-021.html (실시간 테스트) (소스)
  • grammar-error-001.html (실시간 테스트) (소스)
  • grammar-error-002-manual.html (manual test) (소스)
  • grammar-error-003-manual.html (manual test) (소스)
  • spelling-error-001.html (실시간 테스트) (소스)
  • spelling-error-002-manual.html (manual test) (소스)
  • spelling-error-003-manual.html (manual test) (소스)
• text-shadow
  테스트

  • marker-text-shadow.html (실시간 테스트) (소스)
• stroke-color, fill-color, 그리고 stroke-width
  테스트

  • textpath-selection-011.html (실시간 테스트) (소스)
• 커스텀 속성(custom properties) [CSS-VARIABLES-1]

여기에 포함되어야 할 다른 속성이 있을까요?

참고: 역사적으로(그리고 이 문서 작성 시점에도) color와 background-color만 상호운용적으로 지원되었습니다.

참고: color 속성은 텍스트와 모든 라인 장식(밑줄, 윗줄, 취소선) 및 강조 표시(text-emphasis)의 색상을 기원 요소 및 그 상위/하위 요소에서 텍스트에 적용합니다.

위에 명시되지 않은 속성이라도, 적용되는 속성의 값을 결정하는 데 필요하다면, 해당 계산된 값(computed value)은 기원 요소에서 복사되며, 하이라이트 의사 요소에 명시된 값은 무시합니다. 예시:

• forced-color-adjust(강제 색상 모드(forced colors mode)에서 색상 결정에 사용) 그리고 color-scheme(<system-color> 값 결정에 사용)
• font-size, font-family 등(em 및 기타 폰트 상대 길이(font-relative lengths) 결정에 사용)
• line-height(lh 단위 결정에 사용)
• 커스텀 속성(custom properties) [CSS-VARIABLES-1](var() 치환에 사용)

특정 하이라이트 의사 요소에 저자 오리진(author origin)에서 색상이 명시된 경우, 해당 색상은 반드시 명시된 그대로 적용되어야 합니다. 즉 UA는 추가 처리를(반투명 워시 적용 등) 하면 안 됩니다. 하지만 저자 오리진에 색상이 없으면, UA는 추가 색상 처리를 할 수 있습니다.

참고: 이는 모든 UA가 주어진 저자 스타일시트를 해석할 때 색상 대비가 유지되도록 하기 위함입니다.

-webkit-text-fill-color와 같은 벤더 프리픽스 속성은 하이라이트 의사 요소에 적용되지 않습니다.

3.3. 기본 UA 스타일

기본 UA 스타일시트에 아래 추가를 권장합니다:

/* 조정 가능한 방식으로 기본 맞춤법/문법 오류 스타일 제공 */
:root::spelling-error { text-decoration: spelling-error; }
:root::grammar-error  { text-decoration: grammar-error; }

일부 하이라이트 의사 요소에는 쌍(default) 하이라이트 색상—UA가 제공하는 기본 color와 background-color—가 있어야 하며, 두 색상은 동시에 사용 또는 덮어써야 합니다. 자세한 내용은 § 3.3.1 쌍(default) 설정을 참고하세요. ::selection의 경우 HighlightText와 Highlight에 해당해야 하며, ::target-text의 경우 MarkText와 Mark에 해당해야 합니다.

UA는 하이라이트된 콘텐츠의 표현을 향상시키기 위해 추가 효과를 적용할 수 있으며, 예를 들어 하이라이트되지 않은 콘텐츠를 흐리게 하거나, 사용자 상호작용이나 타이밍에 따라 하이라이트 스타일을 단계적으로 제거할 수 있습니다. 이는 CSS로 제어되지 않습니다.

CSS로 제어되는 방식으로 하이라이트 표현을 UA가 조정하는 것은 현재 이슈 6853에서 논의 중입니다.

3.3.1. 쌍(default) 설정

호환성 이유로, 쌍(default) 하이라이트 색상은 color나 background-color가 cascaded value를 저자 오리진(author origin)에서 가져오지 못할 때만 사용되어야 합니다(혹은 값이 저자 오리진에서 상속된 경우). 하이라이트 색상이 revert 또는 revert-layer일 때, cascade를 롤백한 이후의 오리진이 cascaded value의 오리진을 결정합니다.

참고: 이 규칙은 호환성 목적이므로, fill-color나 stroke-color 같은 유사 속성에는 적용되지 않습니다.

<p>Highlight this <em>and this</em>.</p>

em::selection { color: initial; }
em::selection { color: inherit; }
em::selection { color: unset; }
em::selection { color: green; }
p::selection { color: green; }

3.4. 하이라이트 영역

각 하이라이트 유형( § 3.1 하이라이트된 콘텐츠 선택: ::selection, ::search-text, ::target-text, ::spelling-error, ::grammar-error, ::highlight() 의사 요소 참조) 에 대해 전체 문서에 단일 하이라이트 오버레이가 존재하며, 활성화된 부분은 해당 하이라이트 의사 요소로 표현됩니다. 각 박스는 박스가 직접 포함하는 텍스트 또는 대체 콘텐츠에 대응하는 오버레이 부분을 소유합니다.

• 텍스트의 경우, 해당 오버레이는 최소한 전체 em 박스를 덮어야 하며, em 박스를 기준으로 위/아래로 선(line) 박스의 끝까지 확장될 수 있습니다. 두 문자 사이의 간격도 오버레이 영역에 포함될 수 있으며, 이 경우 해당 영역은 두 문자를 모두 포함하는 가장 안쪽 요소에 속하고, 두 문자가 모두 선택될 때 선택됩니다.
  테스트

  • selection-intercharacter-011.html (실시간 테스트) (소스)
  • selection-intercharacter-012.html (실시간 테스트) (소스)
• 대체 콘텐츠(replaced content)의 경우, 오버레이는 최소한 전체 대체 객체를 덮어야 하며, 요소의 전체 콘텐츠 박스까지 확장될 수 있습니다.
  테스트

  • active-selection-043.html (실시간 테스트) (소스)
• 오버레이는 요소의 border-box 내부의 다른 영역을 포함할 수도 있습니다. 이 경우 해당 영역은 그 영역을 포함하는 가장 안쪽 요소에 속합니다.
• 인라인 레벨 박스의 경우, 오버레이는 블록 축을 따라 박스의 테두리 밖으로 라인 박스의 끝까지 확장될 수 있습니다.

F2F 회의록, dbaron의 메시지, Daniel의 스레드, Gecko 노트, Opera 노트, Webkit 노트 참고

이것이 실제 동작을 설명하는 올바른 방식인지 확실하지 않습니다.

3.5. 하이라이트 스타일의 캐스케이딩 및 요소별 적용

각 요소는 자신의 활성 하이라이트 오버레이 부분을 그리며, 해당 부분은 해당 요소가 하이라이트 의사 요소 스타일의 기원 요소일 때 그 스타일을 받습니다. 여러 스타일이 충돌할 경우, 승자 스타일은 캐스케이드(cascade)에 의해 결정됩니다.

지원되는 속성에 대해 캐스케이드에서 값이 주어지지 않았거나, inherit 또는 unset 값이 주어진 경우, 해당 지정 값(specified value)은 해당 요소의 부모의 하이라이트 의사 요소에서 상속되어 결정됩니다. 이 과정은 해당 속성이 상속 속성(inherited property)인지 여부와 관계없이 발생합니다.

또한, 하이라이트 의사 요소가 루트 요소에서 시작된 경우 color의 상속값은 currentColor이며, 초기값(initial value)이 아닙니다.

모든 커스텀 속성은 기원 요소에서 상속되며, 해당 속성이 커스텀 속성이 상속으로 등록되어 있는지 여부와 관계없이 상속됩니다.

p::selection      { color: yellow; background: green; }
p > em::selection { color: orange; }
em::selection     { color:    red; }

<p>Highlight this <em>and this</em>.</p>

여러 개의 선택 스타일을 적용하고자 하는 저자는 전체 문서에 적용되는 선택 스타일로 :root::selection을 사용해야 합니다. 이렇게 하면 하위 요소에서 깔끔하게 오버라이드할 수 있습니다. ::selection만 쓰면 트리의 모든 요소에 적용되어, 조상보다 더 구체적인 스타일을 덮어씁니다.

::selection          { background: blue; }
p.warning::selection { background:  red; }

<p class="warning">Some <strong>very important information</strong></p>

:root::selection     { background: blue; }
p.warning::selection { background:  red; }

다음 예시는 커스텀 속성의 상속을 보여줍니다.

:root {
   --background-color: green;
   --decoration-thickness: 10px;
   --decoration-color: purple;
 }
 ::selection {
   --decoration-thickness: 1px;
   --decoration-color: green;
 }
 div::selection {
   --decoration-color: blue;
   background-color: var(--background-color, red);
   text-decoration-line: underline;
   text-decoration-style: line;
   text-decoration-thickness: var(--decoration-thickness, 5px);
   text-decoration-color: var(--decoration-color, red);
 }

참고: 이 동작 덕분에 기존 구현과 호환되는 방식으로 커스텀 속성으로 선택 영역을 제어할 수 있습니다.

3.6. 하이라이트 그리기

3.6.1. 배경

각 하이라이트 의사 요소는 해당 하이라이트 오버레이의 해당 부분에 배경을 그리며, 바로 아래에 위치한 후손들 아래에 그려집니다 (즉, CSS2.2§E.2의 8단계 직전에 그려짐). ::selection 오버레이는 ::target-text 오버레이 위에 그려지고, ::spelling-error 오버레이 위에 그려지고, ::grammar-error 오버레이 위에 그려지고, ::highlight 오버레이들 위에 그려집니다. ::search-text 오버레이는 UA에 따라 :selection 오버레이 바로 위나 아래에 그려지며, 다른 모든 오버레이들 위에 그려집니다.

3.6.2. 그림자

text-shadow가 하이라이트 의사 요소에 적용되면, 해당 하이라이트 오버레이 배경 위에 그려집니다. 이런 텍스트 그림자는 서로 쌓이며 (그리고 원래 텍스트 및 장식에 적용된 text-shadow 위에도 쌓여서, 원래 그림자도 계속 적용됩니다).

참고: 각 하이라이트 오버레이 배경은 아래 레이어의 그림자 위에 그려지기 때문에, 하이라이트 오버레이 배경이 하위 그림자를 가릴 수 있습니다.

3.6.3. 텍스트 및 텍스트 장식

하이라이트 의사 요소는 관련 텍스트와 텍스트 장식 (그림자 제외) 의 일반적인 그리기를 억제합니다. 대신 최상위 활성 하이라이트 오버레이가 해당 텍스트 (및 장식)를 모든 하이라이트 오버레이 배경 위에 해당 하이라이트의 color로 다시 그립니다.

참고: 이는 그림자와 달리, 줄 장식과 강조 마크는 관련 텍스트에 대해 그려지는 하이라이트 오버레이 배경에 의해 가려지지 않는다는 뜻입니다.

이 목적을 위해, currentColor가 하이라이트 의사 요소의 color 속성에 있으면, 바로 아래 활성 하이라이트 의사 요소 레이어의 color를 나타내고, 마지막에는 원래 사용될 색상 ( 기원 요소나 의사 요소(예: ::first-line 또는 ::first-letter)에 적용된 색상)이 사용됩니다.

참고: 해당 요소의 자체 텍스트 장식 ( 라인 장식 및 강조 표시 모두 ) 는 해당 의사 요소의 color에서 그려집니다. 그 값이 currentColor가 아닌 경우에 한하며, 원래의 색상이나 채움 사양과 관계없이 적용됩니다.

각 하이라이트 의사 요소가 도입한 텍스트 장식은 배경과 같은 순서로 텍스트의 원래 장식 위에 쌓이며, 모든 장식이 각각의 색상으로 그려집니다. 일반적인 그리기 순서가 적용되어, CSS2 Appendix E에 따라 밑줄은 윗줄 아래에, 윗줄은 텍스트 아래에, 텍스트는 취소선 아래에 그려집니다. 단, ::selection에 적용된 텍스트 장식은 텍스트와 함께 최상위 레이어로 모두 그려질 수도 있습니다.

라인 장식은 하이라이트 의사 요소에서 도입된 경우 해당 기원 요소의 텍스트에만 적용되며, 속성 상속을 통해서만 (위 설명처럼) 하위 요소에 전달됩니다.

참고: 기원 요소 자체의 장식과 달리, 하이라이트 의사 요소에서 선언된 장식은 플로우 밖 요소 및 인라인 블록에도 전달되며, 두께와 위치는 하위 요소마다 달라질 수 있습니다.

3.6.4. 대체 요소

대체되지 않은 콘텐츠의 경우 UA는 color와 background-color (알파 채널 포함)를 명시대로 적용해야 합니다. 하지만 대체 콘텐츠의 경우 UA는 선택 영역을 통해 내용이 보이도록 반투명 워시를 생성해 덮어야 합니다. 이 워시는 지정된 background-color가 transparent가 아니라면 해당 색상으로, 그렇지 않으면 지정된 color로 처리합니다. 단, UA는 알파 채널을 조정할 수 있습니다.

3.7. 하이라이트의 보안 고려사항

맞춤법 및 문법 오류 스타일링은 사용자의 사전(dictionary) 내용에 대한 정보를 누출할 수 있으므로 (여기에는 사용자 이름, 심지어 주소록 내용까지 포함될 수 있습니다!) ::spelling-error와 ::grammar-error를 구현하는 UA는 이런 하이라이트 구간의 스타일을 페이지에서 읽을 수 없도록 막아야 합니다.

4. 트리 기반 의사 요소

트리 기반 의사 요소(tree-abiding pseudo-elements)는 항상 박스 트리 내에 포함됩니다. 이들은 상속 가능한 속성은 기원 요소에서 상속받고, 상속 불가 속성은 초기값을 사용합니다. [CSS-CASCADE-4] 이 중 일부는 완전히 스타일 지정 가능한 의사 요소(fully styleable pseudo-elements)입니다. 실제 요소에 적용 가능한 모든 속성이 완전히 스타일 지정 가능한 의사 요소에도 적용됩니다.

4.1. 생성 콘텐츠 의사 요소: ::before 및 ::after

계산된 content 값이 none이 아니면, 이러한 의사 요소는 기원 요소의 즉시 자식인 것처럼 박스를 생성하며, 콘텐츠는 content에 명시된 대로 생성됩니다.

::before

기원 요소(originating element)의 실제 콘텐츠 바로 앞에 위치하는 스타일 지정 가능한 자식 의사 요소를 나타냅니다.

::after

기원 요소(originating element)의 실제 콘텐츠 바로 뒤에 위치하는 스타일 지정 가능한 자식 의사 요소를 나타냅니다.

::before와 ::after 모두 완전히 스타일 지정 가능한 의사 요소입니다: 적용 가능한 속성에 제한이 없습니다.

p.note::before { content: "Note: " }

일반 요소의 콘텐츠처럼, ::before와 :after 의사 요소의 생성 콘텐츠도 해당 ::first-line 및 ::first-letter 의사 요소의 일부가 될 수 있습니다. 또한 일반 자식 요소처럼, ::before와 ::after 의사 요소는 부모( 기원 요소)가 대체 요소(replaced element)일 때 억제됩니다.

4.2. 목록 마커: ::marker 의사 요소

::marker 의사 요소는 마커 박스(marker box)가 자동으로 생성되는 목록 항목(list item)을 나타냅니다. ([CSS-DISPLAY-3] 및 [CSS-LISTS-3] 참고.)

::marker의 내용은 ::first-letter에 의해 무시되며(선택되지 않음) 적용되지 않습니다.

::marker와 ::first-line의 상호작용은 현재 이슈 4506에서 논의 중입니다.

::marker는 트리 기반 의사 요소이지만, 완전히 스타일 지정 가능한 것은 아닙니다; ::marker 의사 요소에는 제한된 속성만 사용할 수 있습니다. 허용된 속성 목록은 CSS Lists 3 § 3.1.1 ::marker에 적용 가능한 속성에서 정의되어 있습니다.

::before::marker 또는 ::after::marker 선택자는 유효하며, 마커 박스를 나타내는 ::before 또는 ::after 의사 요소가 목록 항목(list item)인 경우 사용할 수 있습니다. 그러나 ::marker::marker는 무효이며, display의 계산된 값은 ::marker에서 list-item 특성을 항상 잃게 됩니다.

::marker에 ::prefix와 ::suffix 하위 요소도 있어야 할까요?

4.3. 입력 필드 자리 표시자: ::placeholder 의사 요소

::placeholder 의사 요소는 입력 필드의 자리 표시자 텍스트를 나타냅니다: 입력 내용을 대신하고 폼을 어떻게 작성해야 할지 사용자에게 힌트를 제공합니다. 예를 들어, 날짜 입력 필드에는 "YYYY/MM/DD"와 같은 자리 표시자 텍스트가 있을 수 있으며, 숫자 날짜를 연-월-일 순서로 입력해야 함을 명확하게 해줍니다. 이것은 트리 기반 의사 요소입니다.

참고: :placeholder-shown 의사 클래스도 존재하며, 자리 표시자 텍스트가 표시될 때 (실제) 요소에 적용되고, 그러한 요소를 특별히 스타일링하는 데 사용할 수 있습니다. ::placeholder는 자리 표시자 텍스트 자체만을 나타내므로 기능이 상대적으로 제한됩니다.

::first-line 의사 요소에 적용되는 모든 속성은 ::placeholder 의사 요소에도 적용되며, 단 [CSS-INLINE-3]에 정의된 속성은 제외됩니다.

인터랙티브 미디어에서는 사용자가 입력을 하면 자리 표시자 텍스트가 자주 숨겨지지만, 이는 필수가 아니며, 입력 값과 자리 표시자 텍스트가 동시에 표시될 수도 있습니다. 정확한 동작은 UA에 의해 결정됩니다. 정적 미디어(예: 인쇄물)에서는 사용자가 입력을 한 뒤에도 자리 표시자 텍스트가 남아 있을 수 있습니다.

저자들은 text-align도 지원 속성 목록에 포함되길 원하는 것 같습니다. 예시: 여기의 댓글 참고.

참고: ::placeholder가 요소 트리에 해당하는 요소가 있을 때의 자리 표시자도 참조하도록 요청이 있었습니다. 어떻게 작동해야 할지 명확하지 않지만, 도입할 가치가 있을 수 있습니다. 이슈 2417 참고.

5. 요소 기반 의사 요소

요소 기반 의사 요소(element-backed pseudo-elements)는 대부분의 CSS 및 플랫폼 기능에서 실제 요소처럼 동작합니다 (실제로 선택 불가능한 실제 요소인 경우도 많습니다).

요소 기반 의사 요소는 항상 트리 기반입니다. 별도의 명시가 없는 한, 완전히 스타일 지정 가능하며, 기원 요소에서 상속받으며, 표준 트리 기반 의사 요소와 같습니다. 하지만 다른 요소에서 상속받도록 정의될 수도 있습니다. (예: ::part()는 그림자 트리에서 대표하는 요소의 부모에서 상속받음.)

모든 의사 클래스와 의사 요소는 요소 기반 의사 요소 뒤에도 문법적으로 허용됩니다 (예: x-button::part(label):hover 또는 x-button::part(label)::before), 마치 의사 요소가 타입 셀렉터인 것처럼; 단, 일부는 적용되지 않습니다:

• 구조적 의사 클래스, :has() 의사 클래스, :scope 의사 클래스, 그리고 :host/:host()/:host-context() 의사 클래스는 결코 매칭되지 않습니다.

• ::part()는 결코 매칭되지 않습니다. (다른 요소 기반 의사 요소는 매칭될 수 있음.)

요소 기반 의사 요소는 자기 자신을 실제 요소로 정의할 수 있습니다 (현재 트리에서 접근 불가한 경우도 포함). 그렇게 정의하면, 위에서 금지된 경우를 제외한 모든 의사 클래스 및 의사 요소가 실제 요소에서처럼 매칭됩니다. 그렇지 않으면, 어떤 의사 클래스가 언제 매칭되는지 정의해야 합니다; 그러나 별도 명시가 없는 한, 트리 기반 의사 요소에 허용되는 의사 클래스는 요소 기반 의사 요소에도 항상 허용됩니다.

5.1. 파일 선택 버튼: ::file-selector-button 의사 요소

::file-selector-button 의사 요소는 UA가 해당 버튼을 렌더링하는 경우, <input> 요소 내부의 <button>을 타겟팅합니다 (type=file 일 때).

::file-selector-button 의사 요소에는 적용할 수 있는 속성에 제한이 없습니다.

::file-selector-button { border: 3px solid green }

5.2. details 요소의 확장 가능한 콘텐츠: ::details-content 의사 요소

::details-content 의사 요소는 details 요소에서 확장하거나 접을 수 있는 추가 정보를 타겟팅합니다. 이것은 요소 기반 의사 요소입니다.

::details-content 의사 요소에는 적용할 수 있는 속성에 제한이 없습니다.

details::details-content {
  opacity: 0;
  transition: content-visibility 300ms allow-discrete, opacity 300ms;
}

details[open]::details-content {
  opacity: 1;
}

6. 겹치는 의사 요소 상호작용

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

<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>

7. CSS 객체 모델에 대한 추가

7.1. CSSPseudoElement 인터페이스

CSSPseudoElement 인터페이스는 의사 요소를 이벤트 타겟으로 사용할 수 있게 해줍니다.

[Exposed=Window]
interface CSSPseudoElement : EventTarget {
    readonly attribute CSSOMString type;
    readonly attribute Element element;
    readonly attribute (Element or CSSPseudoElement) parent;
    CSSPseudoElement? pseudo(CSSOMString type);
};

이 인터페이스는 디자인 개발 중이며, 이 초안은 구현보다는 피드백을 더 원합니다. CSSWG는 사용 사례와 문제에 대한 의견을 특히 환영합니다.

type 속성은 의사 요소의 타입을 나타내는 문자열입니다. 값은 다음 중 하나일 수 있습니다:

"::before"

::before 의사 요소를 나타냅니다.

"::after"

::after 의사 요소를 나타냅니다.

"::marker"

::marker 의사 요소를 나타냅니다.

element 속성은 최종 기원 요소를 반환합니다.

parent 속성은 의사 요소의 기원 요소를 반환합니다. 대부분의 의사 요소에서 parent 와 element 는 동일한 Element를 반환합니다; 하위 의사 요소의 경우, parent 는 CSSPseudoElement를, element 는 Element를 반환합니다.

pseudo(type) 메서드는 인자로 참조된 하위 의사 요소가 존재하고 유효하다면 해당 CSSPseudoElement 인터페이스를 반환하고, 그렇지 않으면 null을 반환합니다. 아래 pseudo() 참고.

참고: 이 인터페이스는 향후 다른 의사 요소 타입이나 CSSStyleDeclaration style 속성을 통해 스타일 정보를 설정하는 기능으로 확장될 수 있습니다. 현재 기능은 [web-animations-1] 지원을 위해 필요한 범위로 제한됩니다.

7.2. pseudo() 메서드 (Element 인터페이스)

Element 인터페이스에 주어진 요소가 생성한 특정 타입의 의사 요소를 가져오는 신규 메서드가 추가되었습니다:

partial interface Element {
  CSSPseudoElement? pseudo(CSSOMString type);
};

동일한 의사 요소와 동일한 기원 요소를 나타내는 반환 값은, 관찰 가능한 한, 항상 동일한 CSSPseudoElement 객체여야 합니다. (관찰이 불가능하다면 UA가 편의나 성능을 위해 객체를 삭제하거나 재생성할 수 있습니다.)

반환 값의 정체성, 생명주기, null 여부 (pseudo() 메서드의 잠재적 오류 등)는 아직 논의 중입니다. 이슈 3607, 이슈 3603 참고.

7.3. getComputedStyle()

두 번째 파라미터 pseudoElt가 하이라이트 의사 요소를 참조하면, getComputedStyle() 은 해당 하이라이트가 활성이고 다른 하이라이트는 모두 비활성인 것처럼 스타일을 반환합니다. 이는 실제 하이라이트 상태에 따라 결과가 달라지는 잠재적 모호함과 개인정보 위험을 방지하기 위함입니다.

8. 호환성 문법

기존 CSS Level 2 [CSS2] 스타일시트와의 호환성을 위해, 사용자 에이전트는 아래와 같은 이전의 하나의 콜론 표기(:before, :after, :first-letter, :first-line) 를 ::before, ::after, ::first-letter, ::first-line 의사 요소에 대해 허용해야 합니다.

보안 고려사항

하이라이트에 대한 내용은 § 3.7 하이라이트의 보안 고려사항을 참고하세요.

개인정보 보호 고려사항

이 모듈에 대해 새로운 개인정보 보호 고려사항은 제기되지 않았습니다.

변경 사항

2022년 12월 30일 워킹드래프트 이후 주요 변경점:

• 요소 기반 의사 요소와 완전히 스타일 지정 가능한 의사 요소 용어 정의. (이슈 10199, 이슈 10083)
• 하이라이트 의사 요소의 속성(및 커스텀 속성) 적용과 상속 모델 재정의 (이슈 7591, 7580, 6641, 11317)
• ::highlight() 정의 및 [CSS-HIGHLIGHT-API-1] 크로스레퍼런스 개선. (이슈 6755)
• ::search-text를 새로운 하이라이트 의사 요소로 추가 및 :current와 결합 허용. (이슈 10212 10213, 10298)
• ::details-content 의사 요소 추가 (이슈 10379)
• ::first-letter 앞에 발생하는 공백 및 무중단 공백도 첫 글자에 포함되도록 허용. (이슈 9413)
• ::postfix를 ::suffix로 이름 변경. (이슈 11949)
• ::placeholder에서 인라인 레이아웃 속성 제외. (이슈 5379)
• 하이라이트 의사 요소에 대해 저자가 지정한 색상을 UA가 조정하면 안 된다는 점 명확화. (이슈 6853)
• color의 상속값이 currentColor이며, 초기값이 아님을 명확화.

2020년 12월 31일 작업 초안(31 December 2020 Working Draft) 이후 주요 변경 사항은 다음과 같습니다:

• ::first-letter::prefix 및 ::first-letter::postfix 하위 의사 요소(sub-pseudo-elements)가 추가되어 ::first-letter 의사 요소(pseudo-element)에 연관된 구두점 문제를 다룹니다. (이슈 2040)
• first-letter text 패턴을 미세 조정함:
  • first-letter text에서 단어 구분 공백을 제외함. (이슈 5830)
  • 대시와 시작 구두점을 뒤따르는 구두점에서 제외함. (이슈 5830)
  • 기호(symbols)가 첫 글자(first letter)를 나타내도록 허용함. (이슈 5099)
  • first-letter text가 줄 바꿈으로 잘린다는 점을 명확히 함. (이슈 2254)
• :first-letter 정의를 다시 작성하고 명확히 하였으며, 예시와 설명을 개선함.
• ::first-line 정의를 다시 작성하고 명확히 하였으며, 예시를 개선함.
• line-height가 ::first-line에 적용되는 방식을 정의함. (이슈 2282)
• ::first-line과 ::first-letter의 박스 구조 상호작용을 정의함.
• ::first-line과 root inline box의 계층 순서를 정의함. (이슈 1384)
• 쌍(default) 동작에 대한 highlight pseudo-element color와 background-color 동작을 명확히 함. (이슈 6386, 이슈 6774, 이슈 6779, 이슈 7837)
• 강제 색상 모드(forced colors mode)가 highlight pseudo-elements에 적용되는 방식을 정의함. (이슈 7264)
• highlight pseudo-element 텍스트 장식의 그리기 순서, 전달, 적용 방식을 명확히 함. (이슈 6022, 이슈 6829, 이슈 7101)
• caret-color와 cursor가 highlight pseudo-elements에 적용되지 않도록 함. (이슈 4100)
• highlight pseudo-elements와 getComputedStyle()의 상호작용을 명확히 함. (이슈 6818)
• 커스텀 속성(custom properties)이 의사 요소(pseudo-elements)에 적용되는 방식을 명확히 함. (이슈 6264)
• CSSPseudoElement 인터페이스에 parent 속성과 pseudo() 메서드를 확장하여 하위 의사 요소(sub-pseudo-elements)를 다룸. (이슈 3836)

2019년 2월 25일 작업 초안(25 February 2019 Working Draft) 이후 주요 변경 사항은 다음과 같습니다:

• ::target-text 의사 요소가 추가됨. (이슈 5522)
• ::inactive-selection이 제거됨. (이슈 4579)
• ::file-selectors-button 의사 요소가 추가됨. (이슈 5049)
• ::first-line에서 속성 상속 규칙을 조정하여 상속 가능한 속성과 불가능한 속성을 다르게 처리함. 특히 writing mode를 제어하는 속성의 적용을 제외하였으며, 커스텀 속성 상호작용을 정의함. (이슈 1097)
• ruby-position이 ::first-line에 허용되는 속성에 추가됨. text-emphasis-position과 유사함. (이슈 2998)
• 첫 글자와 주변 구두점 사이의 공백도 ::first-letter에 포함됨. (이슈 5154)
• ::marker와 ::first-letter의 상호작용을 정의함.
• ::before::marker와 ::after::marker가 유효함. (이슈 1793)
• ::marker에 적용 가능한 속성 목록을 [CSS-LISTS-3]로 이동함(새로 content, unicode-bidi, direction 추가).
• ::marker가 CSSPseudoElement 인터페이스 허용 타입에 추가됨. (이슈 3763)
• pseudo()의 반환값을 명확히 함. (이슈 3603 및 3607)
• 인라인 레벨 박스의 하이라이트 오버레이가 라인 박스 끝까지 확장될 수 있도록 허용함. (이슈 5395, 4624)
• currentColor가 highlight pseudo-element에 있을 때 "하이라이트"되지 않았을 때 쓰일 색상을 사용하도록 명확히 함. 해당 색상이 ::first-line 같은 의사 요소에서 제공된 경우라도 적용됨. (이슈 4625)
• text-shadow가 highlight pseudo-elements와 상호작용하는 방식을 정의함. (이슈 3932)
• highlight pseudo-elements에 적용되는 기본 UA 스타일 규칙을 개선함.

2016년 6월 7일 작업 초안(7 June 2016 Working Draft) 이후 변경 사항은 다음과 같습니다:

• spelling-error와 grammar-error를 ::spelling-error 및 ::grammar-error와 함께 UA 스타일시트에 지정함.
• 부모/자식 하이라이트 의사 요소 간 값 전달을 캐스케이드 대신 상속으로 재정의함. 이슈 2474 및 관련 논의 참고.
• stroke-color/fill-color를 예시로 outline 제거 등, 하이라이트 의사 요소에 지원되는 속성 목록을 개선함.
• 하이라이트 의사 요소에서 텍스트 및 텍스트 장식 색상이 어떻게 그려지는지 명확히 함.
• element 속성을 CSSPseudoElement 인터페이스에 추가함.
• type 속성의 값을 CSSPseudoElement 인터페이스에서 해당 의사 요소와 일치하도록 변경함.
• CSSPseudoElement 지원 타입을 줄이고 구현되지 않은 style 속성을 제거함.
• window.getPseudoElements(elem,type) 를 Element.pseudo(type)로 변경함.
• 기타 소규모 명확화 및 수정.

감사의 글(Acknowledgements)

편집자들은 다음 분들께 이 규격에 대한 특별한 공헌에 대해 감사를 전합니다: Tab Atkins, Delan Azabani, David Baron, Oriol Brufau, Razvan Caliman, Stephen Chenney, Chris Coyier, Anders Grimsrud, Vincent Hardy, François Remy.