CSS Pseudo-Elements Module Level 4

CSS Pseudo-Elements Module Level 4
CSS Pseudo-Elements Module Level 4
W3C Working Draft
27 June 2025
More details about this document
This version:
Latest published version:
Editor's Draft:
Previous Versions:
History:
Feedback:
CSSWG Issues Repository
Inline In Spec
Editors:
Elika J. Etemad / fantasai
Apple
Alan Stearns
Adobe Systems Inc.
Former Editor:
Daniel Glazman
Disruptive Innovations
Suggest an Edit for this Spec:
GitHub Editor
Issues List:
Tracked in Editor’s Draft
Test Suite:
World Wide Web Consortium
W3C
liability
trademark
and
permissive document license
rules apply.
Abstract
This CSS module defines pseudo-elements, abstract elements that represent portions of the CSS render tree that can be selected and styled.
CSS
is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc.
Status of this document
This section describes the status of this document at the time of its publication.
A list of current W3C publications
and the latest revision of this technical report
can be found in the
W3C standards and drafts index at https://www.w3.org/TR/.
This document was published
by the
CSS Working Group
as a
Working Draft
using the
Recommendation
track
Publication as a Working Draft
does not imply endorsement by
W3C
and its Members.
This is a draft document
and may be updated, replaced
or obsoleted by other documents at any time.
It is inappropriate to cite this document as other than work in progress.
Please send feedback
by
filing issues in GitHub
(preferred),
including the spec code “css-pseudo” in the title, like this:
“[css-pseudo]
…summary of comment…
”.
All issues and comments are
archived
Alternately, feedback can be sent to the (
archived
) public mailing list
www-style@w3.org
This document is governed by the
03 November 2023 W3C Process Document
This document was produced by a group operating under the
W3C Patent Policy
W3C maintains a
public list of any patent disclosures
made in connection with the deliverables of the group;
that page also includes instructions for disclosing a patent.
An individual who has actual knowledge of a patent which the individual believes
contains
Essential Claim(s)
must disclose the information in accordance with
section 6 of the W3C Patent Policy
The following features are at-risk, and may be dropped during the CR period:
the
::prefix
and
::postfix
sub-elements of
::first-letter
“At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first.
1.
Introduction
This section is informative.
Pseudo-elements
represent abstract elements of the document
beyond those elements explicitly created by the document language.
Since they are not restricted to fitting into the document tree,
they can be used to select and style portions of the document
that do not necessarily map to the document’s tree structure.
For instance, the
::first-line
pseudo-element can
select content on the first formatted line of an element
after
text wrapping,
allowing just that line to be styled differently
from the rest of the paragraph.
Each pseudo-element is associated with an
originating element
and has syntax of the form
::name-of-pseudo
This module defines the pseudo-elements that exist in CSS
and how they can be styled.
For more information on pseudo-elements in general,
and on their syntax and interaction with other
selectors
see
[SELECTORS-4]
Note:
As a reminder,
pseudo-elements cannot be chained together unless explicitly allowed.
For example,
::marker::before
is not allowed;
but
::before::marker
is.
2.
Typographic Pseudo-elements
2.1.
First-Line Text: the
::first-line
pseudo-element
The
::first-line
pseudo-element
represents
the contents of the
first formatted line
of its
originating element
Tests
first-line-allowed-properties.html
(live test)
(source)
first-line-and-marker.html
(live test)
(source)
first-line-and-placeholder.html
(live test)
(source)
first-line-change-inline-color-nested.html
(live test)
(source)
first-line-change-inline-color.html
(live test)
(source)
first-line-first-letter-insert-crash.html
(live test)
(source)
first-line-float-mapped-attribute-crash.html
(live test)
(source)
first-line-inherited-no-transition.html
(live test)
(source)
first-line-inherited-transition-crash.html
(live test)
(source)
first-line-inherited-with-transition.html
(live test)
(source)
first-line-input-image-crash.html
(live test)
(source)
first-line-line-height-001.html
(live test)
(source)
first-line-line-height-002.html
(live test)
(source)
first-line-nested-gcs.html
(live test)
(source)
first-line-on-ancestor-block.html
(live test)
(source)
first-line-opacity-001-ref.html
(live test)
(source)
first-line-opacity-001.html
(live test)
(source)
first-line-replaced-001.html
(live test)
(source)
first-line-with-before-after.html
(live test)
(source)
first-line-with-inline-block-before.html
(live test)
(source)
first-line-with-inline-block.html
(live test)
(source)
first-line-with-out-of-flow-and-nested-div.html
(live test)
(source)
first-line-with-out-of-flow-and-nested-span.html
(live test)
(source)
first-line-with-out-of-flow.html
(live test)
(source)
The rule below means
“change the letters of the first line of every
element to uppercase”:
:first-line
text-transform
uppercase
The selector
p::first-line
does not match any real document element.
It instead matches a pseudo-element
that the user agent will automatically insert
at the beginning of every
element.
Note:
Note that the length of the first line depends on a number of factors,
including the width of the page, the font size, etc.
For example, given an ordinary HTML
[HTML5]
paragraph such as:
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.
Depending on the width of the element,
its lines might be broken as follows:
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.
or alternately as follows:
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.
Finding the First Formatted Line
In CSS, the
::first-line
pseudo-element
can only have an effect when attached to a
block container
The
first formatted line
of
block container
that establishes an
inline formatting context
represents the
inline-level
content of its first
line box
The
first formatted line
of
block container
or
multi-column container
that contains
block-level
content
(and is not a
table wrapper box
is the
first formatted line
of
its first
in-flow
block-level
child.
If no such line exists,
it has no
first formatted line
Note:
The
first formatted line
can be an empty line.
For example, the first line of the
in
><
br
First…
doesn’t contain any letters.
Thus the word “First” is not on the first formatted line,
and will not be affected by
p::first-line
Note:
The first line of a
block container
that does not itself participate in a
block formatting context
cannot be the first formatted line of an ancestor element.
Thus, in
DIV
><
STYLE
"display: inline-block"
Hello
BR
Goodbye
etcetera
DIV
the first formatted line of the
DIV
is not the line “Hello”,
but rather the line that contains that entire inline block.
When a
first formatted line
is represented
by multiple
::first-line
pseudo-elements,
they are nested in the same order as their
originating elements
The
inline-level
contents of this line—​including its
root inline box
fragment—​are nested within the innermost
::first-line
pseudo-element
Consider the following markup:
DIV
First paragraph
Second paragraph
DIV
If we assume a
fictional tag sequence
to represent
the elements’
::first-line
pseudo elements,
it would be something like:
DIV
><
DIV::first-line
><
P::first-line
First paragraph
P::first-line
>DIV::first-line
>><
P::first-line
Second paragraph
P::first-line
>DIV
2.1.2.
Styling the
::first-line
Pseudo-element
The
::first-line
pseudo-element’s generated box
behaves similar to that of an
inline-level box
, but with certain restrictions.
The following CSS properties apply to a
::first-line
pseudo-element:
all font properties (see
[CSS-FONTS-4]
the
color
and
opacity
properties (see
[CSS-COLOR-4]
all background properties (see
[CSS-BACKGROUNDS-3]
any typesetting properties that apply to inline elements (see
[CSS-TEXT-4]
all text decoration properties (see
[CSS-TEXT-DECOR-4]
the
ruby-position
property (see
[CSS-RUBY-1]
any inline layout properties that apply to inline elements (see
[CSS-INLINE-3]
any other properties defined to apply to
::first-line
by their respective specifications
User agents may apply other properties as well except for
the following excluded properties:
writing-mode
direction
text-orientation
Note:
Setting
line-height
on
::first-line
inherits to
the fragment of the
root inline box
that wraps the contents of the first line,
and therefore can both increase and decrease the height of the first line box.
2.1.3.
Inheritance and the
::first-line
Pseudo-element
During CSS
inheritance
the
fragment
of a child that occurs on the first line
inherits any standard
inherited properties
—​except the properties excluded above—​from the
::first-line
pseudo-element.
For all other properties,
including all
custom properties
[CSS-VARIABLES-1]
inheritance is
from the non-pseudo parent.
(The portion of a child element that does not occur on the first line
always inherits from the non-pseudo parent.)
In the common case (of standard inherited CSS properties),
inheritance
into and from a
::first-line
pseudo-element
can be understood by writing out a
fictional tag sequence
to represent
::first-line
Consider the
earlier example
in case of the first rendering, the fictional tag sequence would be:
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.
And in the case of the second rendering:
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.
If a pseudo-element breaks up a real element,
the effect can often be described
by a
fictional tag sequence
that closes and then re-opens the element.
Suppose we mark up the earlier example
with a
span
element encompassing the first sentence:
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.
The effect of the first rendering
would be similar to the following
fictional tag sequence
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.
2.2.
First-Letter Text:
::first-letter
pseudo-element and its
::prefix
and
::suffix
children
Tests
first-letter-001.html
(live test)
(source)
first-letter-002.html
(live test)
(source)
first-letter-003.html
(live test)
(source)
first-letter-004.html
(live test)
(source)
first-letter-005.html
(live test)
(source)
first-letter-allowed-properties.html
(live test)
(source)
first-letter-and-sibling-display-change.html
(live test)
(source)
first-letter-and-whitespace.html
(live test)
(source)
first-letter-background-image-dynamic.html
(live test)
(source)
first-letter-background-image.html
(live test)
(source)
first-letter-bidi-pre-crash.html
(live test)
(source)
first-letter-block-to-inline.html
(live test)
(source)
first-letter-crash.html
(live test)
(source)
first-letter-digraph.html
(live test)
(source)
first-letter-exclude-block-child-marker.html
(live test)
(source)
first-letter-exclude-inline-child-marker.html
(live test)
(source)
first-letter-exclude-inline-marker.html
(live test)
(source)
first-letter-hi-001.html
(live test)
(source)
first-letter-hi-002.html
(live test)
(source)
first-letter-list-item-dynamic-001.html
(live test)
(source)
first-letter-of-html-root-refcrash.html
(live test)
(source)
first-letter-opacity-001-ref.html
(live test)
(source)
first-letter-opacity-001.html
(live test)
(source)
first-letter-opacity-float-001.html
(live test)
(source)
first-letter-punctuation-and-space.html
(live test)
(source)
first-letter-punctuation-dynamic.html
(live test)
(source)
first-letter-skip-empty-span-nested.html
(live test)
(source)
first-letter-skip-empty-span.html
(live test)
(source)
first-letter-skip-marker.html
(live test)
(source)
first-letter-text-and-display-change.html
(live test)
(source)
first-letter-width-2.html
(live test)
(source)
first-letter-width.html
(live test)
(source)
first-letter-with-before-after.html
(live test)
(source)
first-letter-with-preceding-new-line.html
(live test)
(source)
first-letter-with-quote.html
(live test)
(source)
first-letter-with-span.html
(live test)
(source)
The
::first-letter
pseudo-element
represents
the first Letter, Number, or Symbol
(Unicode category
L*
N*
, or
S*
typographic character unit
on the
first formatted line
of its
originating element
(the
first letter
as well as its associated punctuation.
Collectively, this text is the
first-letter text
The
::first-letter
pseudo-element can be used
to create “initial caps” and “drop caps”,
which are common typographic effects.
For example, the following rule creates a 2-line drop-letter
on every paragraph following a level-2 header,
using the
initial-letter
property defined in
[CSS-INLINE-3]
h2 + p::first-letter
initial-letter
Note:
The
first letter
may in fact be a digit,
e.g., the “6” in “67 million dollars is a lot of money.”
To allow independent styling of the
first letter
itself
and its adjacent punctuation,
associated preceding punctuation
is represented by the
::prefix
sub-pseudo-element
of the
::first-letter
pseudo-element
::first-letter::prefix
);
and associated following punctuation
is represented by the
::suffix
sub-pseudo-element
of the
::first-letter
pseudo-element
::first-letter::suffix
).
See
§ 2.2.1 First Letters and Associated Punctuation
, below.
2.2.1.
First Letters and Associated Punctuation
As explained in
CSS Text 3
§ 1.4 Characters and Letters
typographic character unit
can include more than one Unicode codepoint.
For example, combining characters must be kept with their base character.
Also, languages may have additional rules
about how to treat certain letter combinations.
In Dutch, for example, if the letter combination "ij" appears at the beginning of an element,
both letters should be considered within the
::first-letter
pseudo-element.
[UAX29]
When selecting the
first letter
the UA should tailor its definition of
typographic character unit
to reflect the first-letter traditions of
the
::first-letter
pseudo-element’s
containing block
’s
content language
Preceding and following punctuation
must also be included as part of the
first-letter text
in the
::first-letter
pseudo-element
as follows:
All punctuation—​i.e, characters that belong to the Punctuation (
P*
Unicode general category
[UAX44]
—​that precedes the
first letter
as well as any intervening typographic space—​characters belonging to the
Zs
Unicode general category
[UAX44]
other than
U+3000 IDEOGRAPHIC SPACE.
Any punctuation other than opening punctuation and dashes—​i.e. characters that belong to the Punctuation (
P*
Unicode general category
excluding Open Punctuation (
Ps
and Dash Punctuation (
Pd
)—​that follows the
first letter
as well as any intervening typographic space—​characters belonging to the
Zs
Unicode general category
[UAX44]
other than
U+3000 IDEOGRAPHIC SPACE or a
word separator
Informally, the
first-letter text
’s pattern here
can be roughly
(ignoring the exclusions from
Zs
represented as a “regular expression”
(P (Zs|P)*)? (L|N|S) ((Zs|P−(Ps|Pd))* (P−(Ps|Pd))?
—​or, alternatively,
([P] [Zs P]*)? [L N S] ([Zs [P--[Ps Pd]]]* [P--[Ps Pd]])?
—​where the Unicode category abbreviation represents the set
of all
typographic character units
belonging to that category.
See
CSS Text 3
§ 1.4 Characters and Letters
and
CSS Text 3
§ E Characters and Properties
for more information on
typographic character units
and their Unicode properties.
[CSS-TEXT-3]
2.2.2.
Finding the First-Letter Text
As with
::first-line
the
::first-letter
pseudo-element
can only have an effect when attached to a
block container
Its
first-letter text
is the first such
inline-level content
participating in the
inline formatting context
of its
originating element
’s
first formatted line
if it is not preceded by any other in-flow content
(such as images or inline tables) on its line.
For this purpose, any
marker boxes
are ignored,
as if they were out-of-flow.
However, if an element has in-flow
::before
or
::after
content,
the
first-letter text
is selected from the content of the element
including
that generated content.
Example:
After the rule
:before
content
"Note: "
, the
selector
p::first-letter
matches the "N" of "Note".
If no qualifying text exists,
then there is no
first-letter text
and no
::first-letter
pseudo-element.
Note:
When the
first formatted line
is empty,
::first-letter
will not match anything.
For example, in this HTML fragment:
><
br
First...
the first line doesn’t contain any letters,
so
::first-letter
doesn’t match anything.
In particular, it does not match the “F” of “First”,
which is on the second line.
Note:
As with
::first-line
the
first-letter text
of a
block container
that does not participate in a
block formatting context
cannot be the
first-letter text
of an ancestor element.
Thus, in
DIV
><
STYLE
"display: inline-block"
Hello
BR
Goodbye
etcetera
DIV
the
first letter
of the
DIV
is not the letter “H”.
In fact, the
DIV
doesn’t have a
first letter
Any portion of the
first-letter text
that is wrapped to the next line
no longer forms part of the
::first-letter
pseudo-element
2.2.3.
Inheritance and Box Tree Structure of the First-Letter Pseudo-elements
The
::first-letter
pseudo-element is wrapped
immediately around the
first-letter text
it represents,
even if that text is in a descendant.
When a
first-letter text
is represented by multiple
::first-letter
pseudo-elements,
they are nested in the same order as their
originating elements
Inheritance
behaves accordingly.
Consider the following markup:
div
><
span
The first few words
span
and the rest of the paragraph.
div
If we assume a
fictional tag sequence
to represent the elements’
::first-letter
pseudo-elements,
it would be something like:

If any
::first-letter::prefix
or
::first-letter::suffix
pseudo-elements
exist,
they are nested within the innermost
::first-letter
and otherwise interpreted similar to
::first-letter
itself.
Consider the following markup:
div
><
span
“The first few words
span
and the rest of the quotation.
div
If we assume a
fictional tag sequence
to represent the elements’
::first-letter
pseudo-elements,
it would be something like:

If the characters that would form the
first-letter text
are not all in the same element
(as the
‘T
in

‘T...
),
the user agent may create the
::first-letter
pseudo-element
(and its
::prefix
or
::suffix
sub-elements, if any)
from one of the elements, or all elements,
or simply not create the pseudo-element(s).
Additionally, if the
first-letter text
is not at the start of the line
(for example due to bidirectional reordering,
or due to a
list item
marker
with
list-style-position: inside
),
then the user agent is not required to create the pseudo-element(s).
::first-letter
pseudo-element is contained within
any
::first-line
pseudo-elements,
and thus inherits (potentially indirectly) from
::first-line
the same as any
inline box
on the same line.
2.2.4.
Styling the First-Letter Pseudo-elements
In CSS a
::first-letter
pseudo-element
(and its
::prefix
and
::suffix
sub-elements)
is similar to an
inline box
The following properties apply to
::first-letter
::first-letter::prefix
, and
::first-letter::suffix
pseudo-elements:
all font properties (see
[CSS-FONTS-4]
the
color
and
opacity
properties (see
[CSS-COLOR-4]
all background properties (see
[CSS-BACKGROUNDS-4]
any typesetting properties that apply to inline elements (see
[CSS-TEXT-4]
all text decoration properties (see
[CSS-TEXT-DECOR-4]
any inline layout properties that apply to inline elements (see
[CSS-INLINE-3]
margin and padding properties (see
[CSS22]
border properties and
box-shadow
(see
[CSS-BACKGROUNDS-4]
any other properties defined to apply to
::first-letter
by their respective specifications
User agents may apply other properties as well.
However,
in no case may the application of such unlisted properties to
::first-letter
change
what
first-letter text
is represented by that
::first-letter
Note:
In previous levels of CSS,
user agents were allowed to choose a line height, width, and height
based on the shape of the letter,
to approximate font sizes;
and to take the glyph outline into account when performing layout.
The possibility of such loosely-defined magic has been intentionally removed,
as it proved to be a poor solution for the intended use case (drop caps and raised caps),
yet caused interoperability problems.
See
initial-letter
in
[CSS-INLINE-3]
for explicitly handling drop caps and raised caps.
3.
Highlight Pseudo-elements
3.1.
Selecting Highlighted Content: the
::selection
::search-text
::target-text
::spelling-error
::grammar-error
, and
::highlight()
pseudo-elements
Tests
grammar-spelling-errors-001.html
(live test)
(source)
grammar-spelling-errors-002.html
(live test)
(source)
cascade-highlight-001.html
(live test)
(source)
cascade-highlight-002.html
(live test)
(source)
cascade-highlight-004.html
(live test)
(source)
cascade-highlight-005.html
(live test)
(source)
highlight-cascade-001.html
(live test)
(source)
highlight-cascade-003.html
(live test)
(source)
highlight-cascade-004.html
(live test)
(source)
highlight-cascade-005.html
(live test)
(source)
highlight-cascade-006.xhtml
(live test)
(source)
highlight-cascade-007.html
(live test)
(source)
highlight-cascade-008.html
(live test)
(source)
highlight-cascade-009.html
(live test)
(source)
highlight-currentcolor-computed-inheritance.html
(live test)
(source)
highlight-currentcolor-computed-visited.html
(live test)
(source)
highlight-currentcolor-computed.html
(live test)
(source)
highlight-currentcolor-painting-properties-001.html
(live test)
(source)
highlight-currentcolor-painting-properties-002.html
(live test)
(source)
highlight-currentcolor-painting-text-shadow-001.html
(live test)
(source)
highlight-currentcolor-painting-text-shadow-002.html
(live test)
(source)
highlight-currentcolor-root-explicit-default-001.html
(live test)
(source)
highlight-currentcolor-root-explicit-default-002.html
(live test)
(source)
highlight-currentcolor-root-implicit-default-001.html
(live test)
(source)
highlight-currentcolor-root-implicit-default-002.html
(live test)
(source)
highlight-pseudos-computed.html
(live test)
(source)
highlight-pseudos-inheritance-computed-001.html
(live test)
(source)
highlight-pseudos-visited-computed-001.html
(live test)
(source)
highlight-custom-properties-dynamic-001.html
(live test)
(source)
highlight-painting-005-crash.html
(live test)
(source)
highlight-painting-currentcolor-001.html
(live test)
(source)
highlight-painting-currentcolor-001a.html
(live test)
(source)
highlight-painting-currentcolor-002.html
(live test)
(source)
highlight-painting-currentcolor-002a.html
(live test)
(source)
highlight-painting-currentcolor-002b.html
(live test)
(source)
highlight-painting-currentcolor-003.html
(live test)
(source)
highlight-painting-currentcolor-003a.html
(live test)
(source)
highlight-painting-currentcolor-003b.html
(live test)
(source)
highlight-painting-currentcolor-004.html
(live test)
(source)
highlight-painting-currentcolor-004a.html
(live test)
(source)
highlight-painting-currentcolor-004b.html
(live test)
(source)
highlight-painting-currentcolor-005.html
(live test)
(source)
highlight-painting-shadows-horizontal.html
(live test)
(source)
highlight-painting-shadows-vertical.html
(live test)
(source)
highlight-painting-soft-hyphens-001.html
(live test)
(source)
highlight-painting-soft-hyphens-002-crash.html
(live test)
(source)
highlight-styling-001.html
(live test)
(source)
highlight-styling-002.html
(live test)
(source)
highlight-pseudos.html
(live test)
(source)
The
highlight pseudo-elements
represent portions of a document that have been given a particular status
and are typically styled differently to indicate that status to the user.
For example,
selected portions of the document are typically highlighted
(given alternate background and foreground colors, or a color wash)
to indicate their selected status.
The following
highlight pseudo-elements
are defined:
::selection
The
::selection
pseudo-element represents
the portion of a document that has been selected
as the target or object of some possible future user-agent operation(s).
It applies, for example, to selected text within an editable text field,
which would be copied by a copy operation or replaced by a paste operation.
Tests
active-selection-001-manual.html (manual test)
(source)
active-selection-002-manual.html (manual test)
(source)
active-selection-004-manual.html (manual test)
(source)
active-selection-011.html
(live test)
(source)
active-selection-012.html
(live test)
(source)
active-selection-014.html
(live test)
(source)
active-selection-016.html
(live test)
(source)
active-selection-018.html
(live test)
(source)
active-selection-025.html
(live test)
(source)
active-selection-027.html
(live test)
(source)
active-selection-056.html
(live test)
(source)
active-selection-057.html
(live test)
(source)
active-selection-063.html
(live test)
(source)
selection-background-color-001.html
(live test)
(source)
selection-link-001.html
(live test)
(source)
selection-link-002.html
(live test)
(source)
selection-link-003.html
(live test)
(source)
selection-over-highlight-001.html
(live test)
(source)
selection-universal-shadow-dom.html
(live test)
(source)
selection-contenteditable-011.html
(live test)
(source)
selection-input-011.html
(live test)
(source)
selection-textarea-011.html
(live test)
(source)
textpath-selection-011.html
(live test)
(source)
::search-text
The
::search-text
pseudo-element represents text
identified by the user agent’s find-in-page feature.
Since not all UAs style matched text in ways
expressible with the
highlight pseudo-elements
this pseudo-element is optional to implement.
The
:current
pseudo-class
(but not
::current()
may be combined with
::search-text
to represent the currently focused match instance.
The
:past
and
:future
pseudo-classes
are reserved
for analogous use in the future.
Any unsupported combination of these pseudo-classes with
::search-text
must
be treated as invalid.
::target-text
The
::target-text
pseudo-element represents text
directly targeted by the document URL’s
fragment
, if any.
Note:
When a
URL fragment
targets an element,
the
:target
pseudo-element can be used to select it,
but
::target-text
does not match anything.
It only matches text that is itself targeted by the [
fragment
].
Tests
target-text-001.html
(live test)
(source)
target-text-002.html
(live test)
(source)
target-text-003.html
(live test)
(source)
target-text-004.html
(live test)
(source)
target-text-005.html
(live test)
(source)
target-text-006.html
(live test)
(source)
target-text-007.html
(live test)
(source)
target-text-008.html
(live test)
(source)
target-text-009.html
(live test)
(source)
target-text-010.html
(live test)
(source)
target-text-dynamic-001.html
(live test)
(source)
target-text-dynamic-002.html
(live test)
(source)
target-text-dynamic-003.html
(live test)
(source)
target-text-dynamic-004.html
(live test)
(source)
target-text-shadow-horizontal.html
(live test)
(source)
target-text-shadow-vertical.html
(live test)
(source)
target-text-text-decoration-001.html
(live test)
(source)
::spelling-error
The
::spelling-error
pseudo-element represents
a portion of text that has been flagged by the user agent as misspelled.
Tests
spelling-error-001.html
(live test)
(source)
spelling-error-002-manual.html (manual test)
(source)
spelling-error-003-manual.html (manual test)
(source)
spelling-error-004-crash.html
(live test)
(source)
spelling-error-005-crash.html
(live test)
(source)
spelling-error-006.html
(live test)
(source)
::grammar-error
The
::grammar-error
pseudo-element represents
a portion of text that has been flagged by the user agent as grammatically incorrect.
Tests
grammar-error-001.html
(live test)
(source)
grammar-error-002-manual.html (manual test)
(source)
grammar-error-003-manual.html (manual test)
(source)
::highlight(

The
::highlight()
functional pseudo-element
represents
the portion of the document associated with the
custom highlight
identified by the given
custom highlight name
The

argument is required.
See
[CSS-HIGHLIGHT-API-1]
for details.
The
highlight pseudo-elements
do not necessarily fit into the element tree,
and can arbitrarily cross element boundaries without honoring its nesting structure.
3.2.
Styling Highlights
The
highlight pseudo-elements
can only be styled
by a limited set of properties that do not affect layout
and can be applied performantly in a highly dynamic environment—​and additionally (to ensure interoperability)
whose rendering within the
required area
is not dependent on the exact (UA-determined) bounds
of the
highlight overlay
The following properties apply to the
highlight pseudo-elements
color
Tests
active-selection-001-manual.html (manual test)
(source)
active-selection-011.html
(live test)
(source)
active-selection-016.html
(live test)
(source)
active-selection-018.html
(live test)
(source)
background-color
Tests
active-selection-002-manual.html (manual test)
(source)
active-selection-012.html
(live test)
(source)
active-selection-031.html
(live test)
(source)
text-decoration
and its associated properties (including
text-underline-position
and
text-underline-offset
Tests
active-selection-004-manual.html (manual test)
(source)
active-selection-014.html
(live test)
(source)
active-selection-021.html
(live test)
(source)
grammar-error-001.html
(live test)
(source)
grammar-error-002-manual.html (manual test)
(source)
grammar-error-003-manual.html (manual test)
(source)
spelling-error-001.html
(live test)
(source)
spelling-error-002-manual.html (manual test)
(source)
spelling-error-003-manual.html (manual test)
(source)
text-shadow
Tests
marker-text-shadow.html
(live test)
(source)
stroke-color
fill-color
, and
stroke-width
Tests
textpath-selection-011.html
(live test)
(source)
custom properties
[CSS-VARIABLES-1]
Are there any other properties that should be included here?
Note:
Historically (and at the time of writing)
only
color
and
background-color
have been interoperably supported.
Note:
The
color
property sets the color of
both the text
and all line decorations (underline, overline, line-through)
and emphasis marks (
text-emphasis
applied to the text
by the
originating element
and its ancestors and descendants.
For any properties not listed above,
but which are required to resolve the values of applicable properties,
their
computed values
are copied from those of the
originating element
ignoring any values specified on the
highlight pseudo-element
itself.
For example:
forced-color-adjust
(used in
forced colors mode
to resolve colors)
and
color-scheme
(used to resolve

values)
font-size
font-family
, etc. (used to resolve
em
and other
font-relative lengths
).
line-height
(used to resolve
lh
units)
custom properties
[CSS-VARIABLES-1]
(used in
var()
substitutions)
If, for a given
highlight pseudo-element
there are colors specified in the
author origin
those colors must be respected as specified;
i.e. the UA must not apply any extra processing
(such as using semi-transparent washes).
However if there are no colors in the
author origin
the UA may apply additional color processing.
Note:
This is to ensure that color contrast is preserved
across all user agents interpreting a given author stylesheet.
Vendor-prefixed properties such as
-webkit-text-fill-color
are not applicable to the
highlight pseudo-elements
3.3.
Default UA Styles
The following additions are recommended for the default UA stylesheet:
/* Represent default spelling/grammar error styling in an adjustable way */
:root::spelling-error
text-decoration
spelling-error
:root::grammar-error
text-decoration
grammar-error
Some
highlight pseudo-elements
should have
paired default highlight colors
—​a default
color
and
background-color
provided by the UA
that are either used or overridden together,
see
§ 3.3.1 Paired Defaults
For
::selection
they should correspond to
HighlightText
and
Highlight
while for
::target-text
they should correspond to
MarkText
and
Mark
UAs may apply additional effects to enhance the presentation
of highlighted content,
for example dimming content other than the highlighted text
or transitioning out a highlight style based on user interactions or timing.
These are not controlled by CSS.
UA tweaks to the presentation of highlights
in ways that
are
controlled by CSS
are currently under discussion
in
Issue 6853
3.3.1.
Paired Defaults
For compatibility reasons,
paired default highlight colors
must only be
used
when neither
color
nor
background-color
yield a
cascaded value
from the
author origin
(or inherit their value from the author origin).
When a highlight color is
revert
or
revert-layer
the origin
after
rolling back the cascade
determines the
cascaded value
’s
origin
Note:
Because this rule is for compatibility reasons,
it does not apply to other similar properties
like
fill-color
or
stroke-color
For example,
given the following markup:
Highlight this
em
and this
em
Any of the following rules
would suppress the default
background-color
for
::selection
in the

element
if given by the author:
em
:selection
color
initial
em::selection
color
inherit
em::selection
color
unset
em::selection
color
green
p::selection
color
green
Tests
highlight-paired-cascade-001.html
(live test)
(source)
highlight-paired-cascade-002.html
(live test)
(source)
highlight-paired-cascade-003.html
(live test)
(source)
highlight-paired-cascade-004.html
(live test)
(source)
highlight-paired-cascade-005.html
(live test)
(source)
highlight-paired-cascade-006.html
(live test)
(source)
3.4.
Area of a Highlight
For each type of highlighting (see
§ 3.1 Selecting Highlighted Content: the ::selection, ::search-text, ::target-text, ::spelling-error, ::grammar-error, and ::highlight() pseudo-elements
there exists a single
highlight overlay
for the entire document,
the active portions of which are represented
by the corresponding
highlight pseudo-element
Each box owns the piece of the overlay corresponding to any text or replaced content
directly contained by the box.
For text, the corresponding overlay must cover at least the entire em box
and may extend further above/below the em box to the line box edges.
Spacing between two characters may also be part of the overlay area,
in which case it belongs to the innermost element that contains both characters
and is selected when both characters are selected.
Tests
selection-intercharacter-011.html
(live test)
(source)
selection-intercharacter-012.html
(live test)
(source)
For replaced content, the associated overlay must cover at least the entire replaced object,
and may extend outward to include the element’s entire content box.
Tests
active-selection-043.html
(live test)
(source)
The overlay may also include other areas within the border-box of an element;
in this case, those areas belong to the innermost such element that contains the area.
For an
inline-level box
, the overlay may extend outside its border edges
in the
block axis
as far as the edges of its
line box
See
F2F minutes
dbaron’s message
Daniel’s thread
Gecko notes
Opera notes
Webkit notes
Not sure if this is the correct way of describing the way things work.
3.5.
Cascading and Per-Element Highlight Styles
Each element draws its own active portions of the
highlight overlays
which receives the styles specified by
the corresponding
highlight pseudo-element
styles
for which that element is the
originating element
When multiple styles conflict,
the winning style is determined by the cascade.
When any supported property is not given a value by the cascade,
or given a value of
inherit
or
unset
its
specified value
is determined by inheritance from
the corresponding
highlight pseudo-element
of its
originating element
’s parent element.
This occurs regardless of whether that property is an
inherited property
Additionally, for
highlight pseudo-elements
originating from the
root element
the inherited value of
color
is
currentColor
, not the
initial value
All
custom properties
inherit from the
originating element
regardless of whether that property is a
custom property
that is registered to
inherit
or not.
Tests
active-selection-051.html
(live test)
(source)
active-selection-052.html
(live test)
(source)
active-selection-053.html
(live test)
(source)
active-selection-054.html
(live test)
(source)
cascade-highlight-004.html
(live test)
(source)
For example, if the following rules were applied:
:selection
color
yellow
background
green
p > em::selection
color
orange
em::selection
color
red
to the following markup:
Highlight this
em
and this
em
The selection highlight would be green throughout,
with yellow text outside the

element
and orange text inside it.
Tests
cascade-highlight-001.html
(live test)
(source)
Authors wanting multiple selections styles should use
:root::selection
for their document-wide selection style,
since this will allow clean overriding in descendants.
::selection
alone applies to every element in the tree,
overriding the more specific styles of any ancestors.
For example, if an author specified
::selection
background
blue
p.warning::selection
background
red
and the document included
class
"warning"
Some
strong
very important information
strong
>The highlight would be blue over “very important information”
because the

element´s
::selection
also matches the
::selection { background: blue; }
rule.
(Remember that
is implied when a tag selector is missing.)
The style rules that would give the intended behavior
(red highlight within
p.warning
, blue elsewhere) are
:root::selection
background
blue
p.warning::selection
background
red
Tests
cascade-highlight-002.html
(live test)
(source)
The following example demonstrates the inheritance of
custom properties
For example, if an author specified
:root
--background-color
green
--decoration-thickness
10
px
--decoration-color
purple
::selection
--decoration-thickness
px
--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
px
);
text-decoration-color
var
--decoration-color
red
);
The universal
::selection
uses the user-agent’s default styling
because it only defines custom properties,
with no properties that influence the appearance.
A div’s selection highlight would apply a green background to the selected content,
with a 10px thick blue underline.
Since
--background-color
and
--decoration-thickness
custom properties
are not specified on the
div::selection
peudo-element,
they are inherited from its originating
div
element,
which itself inherits the custom properties from the root.
However since
--decoration-color
is specified on the
div::selection
itself,
its value from the
originating element
is not used.
Note:
This behavior allows control of selection with custom properties
in a way that is compatible with pre-existing implementations.
3.6.
Painting the Highlight
Tests
active-selection-014.html
(live test)
(source)
active-selection-041.html
(live test)
(source)
active-selection-045.html
(live test)
(source)
highlight-painting-001.html
(live test)
(source)
highlight-painting-002.html
(live test)
(source)
highlight-painting-003.html
(live test)
(source)
highlight-painting-004.html
(live test)
(source)
3.6.1.
Backgrounds
Each
highlight pseudo-element
draws its background
over the corresponding portion of the
highlight overlay
painting it
immediately below any positioned descendants
(i.e. just before step 8 in
CSS2.2§E.2
).
The
::selection
overlay is drawn
over the
::target-text
overlay which is drawn
over the
::spelling-error
overlay
which is drawn over the
::grammar-error
overlay
which is drawn over the
::highlight
overlays.
The
::search-text
overlay is drawn directly over or below
the
:selection
overlay depending on the UA,
and drawn over all other overlays.
Tests
selection-overlay-and-grammar-001.html
(live test)
(source)
selection-overlay-and-spelling-001.html
(live test)
(source)
highlight-z-index-001.html
(live test)
(source)
highlight-z-index-002.html
(live test)
(source)
selection-background-painting-order.html
(live test)
(source)
3.6.2.
Shadows
Any
text-shadow
applying to a
highlight pseudo-element
is drawn over its corresponding
highlight overlay
background.
Such text shadows also stack over each other
(and over any original
text-shadow
applied to the text and its decorations,
which continues to apply).
Note:
Since each
highlight overlay
background
is drawn over any shadows belonging to the layer(s) below,
highlight overlay
background can obscure lower-level shadows.
3.6.3.
Text and Text Decorations
highlight pseudo-element
suppresses the normal drawing of any associated text,
and the text decorations
(other than shadows)
that had been applied to that text.
Instead the topmost active
highlight overlay
redraws that text
(and those decorations)
over all the
highlight overlay
backgrounds
using that highlight’s own
color
Note:
This means that unlike shadows,
line decorations and emphasis marks
won’t be obscured by any highlight overlay backgrounds
that are drawn for the associated text.
For this purpose,
currentColor
on a
highlight pseudo-element
’s
color
property represents
the
color
of the next
active
highlight pseudo-element
layer below,
falling back finally to the colors that would otherwise have been used
(those applied by the
originating element
or
an intervening
pseudo-element
such as
::first-line
or
::first-letter
).
Note:
The element’s own text decorations
(both
line decorations
and
emphasis marks
are thus drawn in the pseudo-element’s own
color
when that is not
currentColor
regardless of their original color or fill specifications.
Any text decorations introduced by each
highlight pseudo-element
are stacked in the same order as their backgrounds
over the text’s original decorations
and are all drawn, each decoration in its own color.
The normal painting order applies,
so as per
CSS2 Appendix E
all underlines are drawn
below overlines which are drawn
below the text which is drawn
below any line-throughs.
However, text decorations applied by
::selection
may instead all be drawn
along with the text
as a topmost set of layers
above all other decorations.
For example, assuming the original text has an underline and a strike-through,
that
::selection
applies an underline
and
::target-text
applies both overline and strike-through,
the following are both conformant painting orders:
original underline
::selection
underline
::target-text
overline
::selection
-colored text
original strike-through
::target-text
strike-through
original underline
::target-text
overline
original strike-through
::target-text
strike-through
::selection
underline
::selection
-colored text
Line decorations
introduced by
highlight pseudo-elements
apply only to the text associated with their
originating element
and are not propagated to descendants
except via property
inheritance
(as described
above
).
Note:
Unlike the originating element’s own decorations,
decorations declared on a highlight pseudo-element
propagate to
out-of-flow elements
and
inline blocks
with thickness and position varying between descendants.
Tests
selection-originating-underline-order.html
(live test)
(source)
selection-originating-decoration-color.html
(live test)
(source)
selection-originating-strikethrough-order.html
(live test)
(source)
3.6.4.
Replaced Elements
For non-replaced content, the UA must honor the
color
and
background-color
(including their alpha channels) as specified.
However, for replaced content, the UA should create a semi-transparent wash
to coat the content so that it can show through the selection.
This wash should be of the specified
background-color
if that is not
transparent
else of the specified
color
however the UA may adjust the alpha channel.
Tests
selection-paint-image.html
(live test)
(source)
3.7.
Security Considerations for Highlighting
Because the styling of spelling and grammar errors
can leak information about the contents of a user’s dictionary
(which can include the user’s name and even includes the contents of their address book!)
UAs that implement
::spelling-error
and
::grammar-error
must prevent pages from being able to read
the styling of such highlighted segments.
4.
Tree-Abiding Pseudo-elements
Tree-abiding pseudo-elements
always fit within the box tree.
They
inherit
any inheritable properties from their
originating element
non-inheritable properties take their
initial values
as usual.
[CSS-CASCADE-4]
A subset of these are the
fully styleable pseudo-elements
all properties that apply to a real element
also apply to a
fully styleable pseudo-element
Tests
tree-abiding-pseudo-elements.html
(live test)
(source)
4.1.
Generated Content Pseudo-elements:
::before
and
::after
When their computed
content
value is not
none
these pseudo-elements generate boxes
as if they were immediate children of their
originating element
with content as specified by
content
::before
Represents a styleable child pseudo-element
immediately before the
originating element
’s actual content.
::after
Represents a styleable child pseudo-element
immediately after the
originating element
’s actual content.
Tests
before-after-dynamic-custom-property-001.html
(live test)
(source)
before-dynamic-display-none.html
(live test)
(source)
before-in-display-none-thcrash.html
(live test)
(source)
Both
::before
and
::after
are
fully styleable pseudo-elements
there is no restriction on what properties apply to them.
For example, the following rule inserts the string “Note: ”
before the content of every

element
whose
class
attribute has the value
note
p.note::before
content
"Note: "
Since the initial value of
display
is
inline
this will generate an inline box.
Like other inline children of

it will participate in

’s inline formatting context,
potentially sharing a line with other content.
As with the content of regular elements,
the generated content of
::before
and
:after
pseudo-elements
can form part of any
::first-line
and
::first-letter
pseudo-elements
applied to its
originating element
Also as with regular child elements,
the
::before
and
::after
pseudo-elements
are suppressed when their parent, the
originating element
is
replaced
4.2.
List Markers: the
::marker
pseudo-element
The
::marker
pseudo-element represents
the automatically generated
marker box
of a
list item
(See
[CSS-DISPLAY-3]
and
[CSS-LISTS-3]
.)
Tests
marker-and-other-pseudo-elements.html
(live test)
(source)
marker-animate-002.html
(live test)
(source)
marker-animate.html
(live test)
(source)
marker-color.html
(live test)
(source)
marker-computed-content.html
(live test)
(source)
marker-computed-size.html
(live test)
(source)
marker-content-001.html
(live test)
(source)
marker-content-001b.html
(live test)
(source)
marker-content-001c.html
(live test)
(source)
marker-content-002.html
(live test)
(source)
marker-content-003.html
(live test)
(source)
marker-content-003b.html
(live test)
(source)
marker-content-004.html
(live test)
(source)
marker-content-005.html
(live test)
(source)
marker-content-006.html
(live test)
(source)
marker-content-010.html
(live test)
(source)
marker-content-012.html
(live test)
(source)
marker-content-013.html
(live test)
(source)
marker-content-014.html
(live test)
(source)
marker-content-015.html
(live test)
(source)
marker-content-016.html
(live test)
(source)
marker-content-017.html
(live test)
(source)
marker-content-018.html
(live test)
(source)
marker-content-019.html
(live test)
(source)
marker-content-020.html
(live test)
(source)
marker-content-021.html
(live test)
(source)
marker-content-022.html
(live test)
(source)
marker-content-023.html
(live test)
(source)
marker-content-024.html
(live test)
(source)
marker-default-styles.html
(live test)
(source)
marker-display-computed.html
(live test)
(source)
marker-display-dynamic-001.html
(live test)
(source)
marker-font-properties.html
(live test)
(source)
marker-font-variant-numeric-default-ref.html
(live test)
(source)
marker-font-variant-numeric-default.html
(live test)
(source)
marker-font-variant-numeric-normal-ref.html
(live test)
(source)
marker-font-variant-numeric-normal.html
(live test)
(source)
marker-hit-testing.html
(live test)
(source)
marker-hyphens.html
(live test)
(source)
marker-inherit-line-height.html
(live test)
(source)
marker-inherit-values.html
(live test)
(source)
marker-intrinsic-contribution-001.html
(live test)
(source)
marker-intrinsic-contribution-002.html
(live test)
(source)
marker-letter-spacing.html
(live test)
(source)
marker-line-break.html
(live test)
(source)
marker-line-height.html
(live test)
(source)
marker-list-style-position.html
(live test)
(source)
marker-overflow-wrap.html
(live test)
(source)
marker-reverted-styles.html
(live test)
(source)
marker-tab-size.html
(live test)
(source)
marker-text-align-001.html
(live test)
(source)
marker-text-align-002.html
(live test)
(source)
marker-text-align-003.html
(live test)
(source)
marker-text-combine-upright.html
(live test)
(source)
marker-text-decoration-skip-ink.html
(live test)
(source)
marker-text-emphasis.html
(live test)
(source)
marker-text-transform-default.html
(live test)
(source)
marker-text-transform-dynamic.html
(live test)
(source)
marker-text-transform-uppercase.html
(live test)
(source)
marker-unicode-bidi-default-ref.html
(live test)
(source)
marker-unicode-bidi-default.html
(live test)
(source)
marker-unicode-bidi-normal-ref.html
(live test)
(source)
marker-unicode-bidi-normal.html
(live test)
(source)
marker-variable-computed-style.html
(live test)
(source)
marker-variable.html
(live test)
(source)
marker-word-break.html
(live test)
(source)
marker-word-spacing.html
(live test)
(source)
outside-marker-paint-order.html
(live test)
(source)
marker-supported-properties-in-animation.html
(live test)
(source)
marker-supported-properties.html
(live test)
(source)
The contents of a
::marker
are ignored (not selected) by
::first-letter
Interaction of
::marker
and
::first-line
is currently under discussion in
Issue 4506
::marker
is a
tree-abiding pseudo-element
but is not
fully styleable
only a limited set of properties can be used on the
::marker
pseudo-element.
This list is defined in
CSS Lists 3
§ 3.1.1 Properties Applying to ::marker
The
::before::marker
or
::after::marker
selectors
are valid and
can be used to represent the
marker boxes
of
::before
or
::after
pseudo-elements that happen to be
list items
However
::marker::marker
is invalid,
and the computed value of
display
on
::marker
always loses any
list-item
aspect.
Should
::marker
also have
::prefix
and
::suffix
sub-elements?
4.3.
Placeholder Input: the
::placeholder
pseudo-element
The
::placeholder
pseudo-element represents
placeholder text in an input field:
text that represents the input
and provides a hint to the user on how to fill out the form.
For example, a date-input field
might have the placeholder text “YYYY/MM/DD”
to clarify that numeric dates are to be entered in year-month-day order.
It is a
tree-abiding pseudo-element
Tests
placeholder-as-multicol-crash.html
(live test)
(source)
placeholder-excluded-properties.html
(live test)
(source)
placeholder-inherit.html
(live test)
(source)
placeholder-input-dynamic-crash.html
(live test)
(source)
placeholder-input-number.html
(live test)
(source)
For example, according to the semantics of
[HTML]
the
placeholder
attribute on the
input
and
textarea
elements
provide placeholder text.
The
::placeholder
pseudo-element
represents such text when it is displayed.
Note:
There also exists a
:placeholder-shown
pseudo-
class
which applies to (real) elements while they are showing placeholder text,
and can be used to style such elements specially.
::placeholder
specifically represents the placeholder
text
and is thus relatively limited in its abilities.
All properties that apply to the
::first-line
pseudo-element
also apply to the
::placeholder
pseudo-element,
except those defined in
[CSS-INLINE-3]
In interactive media, placeholder text is often hidden once the user has entered input;
however this is not a requirement, and both the input value and the placeholder text may be visible simultaneously.
The exact behavior is UA-defined.
Note that in static media (such as print)
placeholder text will be present even after the user has entered input.
Authors seem to want
text-align
on the list of supported properties.
See e.g.
comments here
Note:
It’s been requested that
::placeholder
also refer to
a placeholder which has a corresponding element in the element tree.
It’s not clear how this should work, but it may be worth doing.
See
Issue 2417
5.
Element-backed Pseudo-Elements
The
element-backed pseudo-elements
interact with most CSS and other platform features
as if they were real elements
(and, in fact, often
are
real elements
that are not otherwise selectable).
Element-backed pseudo-elements are always
tree-abiding
Unless otherwise specified,
they are
fully styleable
and inherit from their
originating element
just like standard
tree-abiding pseudo-elements
but they can be defined to inherit from another element instead.
(For example,
::part()
inherits from
the parent of the element it represents in the shadow tree.)
All
pseudo-classes
and
pseudo-elements
are syntactically allowed after an
element-backed pseudo-element
(such as
x-button::part(label):hover
or
x-button::part(label)::before
),
just as if the pseudo-element were a
type selector
but some are disallowed from matching:
The
structural pseudo-classes
:has()
pseudo-class,
:scope
pseudo-class,
and
:host
:host()
:host-context()
pseudo-classes
never match.
::part()
never matches. (Other
element-backed pseudo-elements
can, however.)
An
element-backed pseudo-element
can define itself as representing a real element
(possibly one not accessible in the current tree).
If it does so,
all pseudo-classes and pseudo-elements not otherwise disallowed (see above)
match as they would on that real element.
If it does not do so,
it must define which pseudo-classes it matches and when;
however, unless otherwise specified,
any pseudo-classes allowed on
tree-abiding pseudo-elements
are always allowed on
element-backed pseudo-elements
5.1.
File Selector Button: the
::file-selector-button
pseudo-element
The
::file-selector-button
pseudo-element
targets the

inside an

element with
type=file
if the UA renders such a button.
Tests
file-selector-button-001.html
(live test)
(source)
file-selector-button-after-part.html
(live test)
(source)
file-selector-button-display-none-overflow-crash.html
(live test)
(source)
file-selector-button-display-toggle-crash.html
(live test)
(source)
file-selector-button-float.html
(live test)
(source)
file-selector-button-inherit.html
(live test)
(source)
There is no restriction on which properties apply to the
::file-selector-button
pseudo-element.
For example, the following example should show a green border around the
file selector button:
::file-selector-button
border
px
solid green
5.2.
Expandable contents of details element: the
::details-content
pseudo-element
The
::details-content
pseudo-element targets
the additional information in a a
details
element
that can be expanded or collapsed.
It is an
element-backed pseudo-element
Tests
details element
There is no restriction on which properties apply to the
::details-content
pseudo-element.
For example, the following example would
animate the opacity of the additional information
when the
details
element opens:
details
:details-content
opacity
transition
content-visibility
300
ms
allow-discrete
opacity
300
ms
details
open
::details-content
opacity
6.
Overlapping Pseudo-element Interactions
Recall that
the contents of
::before
and
::after
are selected
exactly as if they were normal elements in the document source tree
the
::first-letter
boundaries are tightly wrapped around the first letter text,
and
::first-letter
is constrained to exist solely on the first formatted line.
the
::first-line
start is inserted just inside the containing block’s element boundary,
and its end after the close of all content on the line
The following CSS and HTML example
illustrates how overlapping pseudo-elements interact:
style
color
red
font-size
12
pt
::
first-letter
color
green
font-size
200
::
first-line
color
blue
style
Some text that ends up on two lines
The first letter of each P element will be green with a font size of ’24pt'.
The rest of the first formatted line will be blue
while the rest of the paragraph will be red.
Assuming that a line break will occur before the word "ends",
the
fictional tag sequence
for this fragment might be:
p::first-line
p::first-letter
p::first-letter
ome text that
p::first-line
ends up on two lines
7.
Additions to the CSS Object Model
Tests
idlharness.html
(live test)
(source)
7.1.
CSSPseudoElement
Interface
The
CSSPseudoElement
interface
allows pseudo-elements to be event targets.
Exposed
Window
interface
CSSPseudoElement
EventTarget
readonly
attribute
CSSOMString
type
readonly
attribute
Element
element
readonly
attribute
Element
or
CSSPseudoElement
parent
CSSPseudoElement
pseudo
CSSOMString
type
);
};
This interface is under design development,
and this draft is looking for feedback more than implementation.
The CSSWG would particularly appreciate hearing about use cases and problems.
The
type
attribute
is a string representing the type of the pseudo-element.
This can be one of the following values:
"::before"
Represents the
::before
pseudo-element.
"::after"
Represents the
::after
pseudo-element.
"::marker"
Represents the
::marker
pseudo-element.
The
element
attribute is the
ultimate originating element
of the
pseudo-element
The
parent
attribute is the
originating element
of the pseudo-element.
For most pseudo-elements
parent
and
element
will return the same
Element
for
sub-pseudo-elements
parent
will return a
CSSPseudoElement
while
element
returns an
Element
The
pseudo
type
method
returns the
CSSPseudoElement
interface
representing the
sub-pseudo-element
referenced in its argument,
if such a
sub-pseudo-element
could exist and would be valid,
and null otherwise.
See
pseudo()
below.
Note:
This interface may be extended in the future
to other pseudo-element types
and/or to allow setting style information
through a
CSSStyleDeclaration
style
attribute.
The current functionality is limited
to that which is needed to support
[web-animations-1]
7.2.
pseudo()
method of the
Element
interface
A new method is added to the
Element
interface to retrieve
pseudo-elements created by a given element for a given type:
partial
interface
Element
CSSPseudoElement
pseudo
CSSOMString
type
);
};
The
pseudo
CSSOMString type
method
is used to retrieve the
CSSPseudoElement
instance
of the type matching
type
associated with the element.
When it is called,
execute the following steps:
Parse
the
type
argument as a

and let
type
be the result.
If
type
is failure,
return null.
Otherwise, return the
CSSPseudoElement
object
representing the pseudo-element
that would match the selector
type
with
this
as its
originating element
Return values that represent the same
pseudo-element
on the same
originating element
must be, insofar as observable,
always the same
CSSPseudoElement
object.
(The UA may drop or regenerate the object for convenience or performance
if this is not observable.)
The identity, lifetime, and nullness of the return value
(and potential error cases)
of the
pseudo()
method is still under discussion.
See
Issue 3607
and
Issue 3603
7.3.
getComputedStyle()
When the second parameter
pseudoElt
refers to a
highlight pseudo-element
getComputedStyle()
returns styles
as if that highlight is active
and all other highlights are inactive.
This avoids the potential
ambiguity and privacy risks of returning a result
that depends on the actual highlight state.
8.
Compatibility Syntax
For compatibility with existing style sheets written against CSS Level 2
[CSS2]
user agents must also accept the previous one-colon notation
:before
:after
:first-letter
:first-line
for the
::before
::after
::first-letter
, and
::first-line
pseudo-elements.
Security Considerations
For highlighting, see
§ 3.7 Security Considerations for Highlighting
Privacy Considerations
No new privacy considerations have been raised against this module.
Changes
Significant changes since the
30 December 2022 Working Draft
include:
Defined
element-backed pseudo-element
and
fully styleable pseudo-element
as terms.
Issue 10199
Issue 10083
Reworked the property (and custom property)
application and inheritance model for
highlight pseudo-elements
(Issues
7591
7580
6641
11317
Defined
::highlight()
and improved cross-referencing to
[CSS-HIGHLIGHT-API-1]
(Issue
6755
Added
::search-text
as a new
highlight pseudo-element
and allowed it to combine with
:current
(Issues
10212
10213
and
10298
Added
::details-content
pseudo-element
Issue 10379
Allow space and no-break space to be part of
::first-letter
when occuring before the
first letter
Issue 9413
Renamed
::postfix
to
::suffix
(Issue
Issue 11949
Excluded inline layout properties from
::placeholder
Issue 5379
Clarified that UAs must not tweak author-specified colors for
highlight pseudo-elements
Issue 6853
Clarified that the inherited value of
color
is
currentColor
, not the
initial value
Significant changes since the
31 December 2020 Working Draft
include:
Added
::first-letter::prefix
and
::first-letter::postfix
sub-pseudo-elements
to address punctuation associated with the
::first-letter
pseudo-element
Issue 2040
Fine-tuned the
first-letter text
pattern:
Excluded word-separating spaces from
first-letter text
Issue 5830
Excluded dashes and opening punctuation from following punctuation.
Issue 5830
Allowed symbols to represent the
first letter
Issue 5099
Clarified that the
first-letter text
is truncated by a line break.
Issue 2254
Rewrote and clarified definition of
:first-letter
, and improved examples and notes.
Rewrote and clarified definition of
::first-line
, and improved examples.
Defined application of
line-height
to
::first-line
Issue 2282
Defined box structure interaction of
::first-line
and
::first-letter
Defined hierarchy order of
::first-line
and the
root inline box
Issue 1384
Clarified
paired default
behavior of
highlight pseudo-element
color
and
background-color
Issue 6386
Issue 6774
Issue 6779
Issue 7837
Defined application of
forced colors mode
to
highlight pseudo-elements
Issue 7264
Clarified painting order, propagation, and application of
highlight pseudo-element
text decorations.
Issue 6022
Issue 6829
Issue 7101
Removed
caret-color
and
cursor
from applying to
highlight pseudo-elements
Issue 4100
Clarified interaction of
highlight pseudo-elements
and
getComputedStyle()
Issue 6818
Clarified application of
custom properties
to
pseudo-elements
Issue 6264
Extended the
CSSPseudoElement
interface
with a
parent
attribute
and
pseudo()
method
to address
sub-pseudo-elements
Issue 3836
Significant changes since the
25 February 2019 Working Draft
include:
Added
::target-text
pseudo-element.
Issue 5522
Removed
::inactive-selection
Issue 4579
Added
::file-selectors-button
pseudo-element.
Issue 5049
Adjusted rules for inheritance of properties from
::first-line
to handle inheritable vs non-inheritable properties differently,
specifically excluded applicability of properties that control
writing mode
because they affect the cascade,
and defined interaction with custom properties.
Issue 1097
Added
ruby-position
to properties allowed on
::first-line
analogous with
text-emphasis-position
Issue 2998
Included spaces between the first letter and its surrounding punctuation in
::first-letter
Issue 5154
Defined interaction of
::marker
and
::first-letter
Made
::before::marker
and
::after::marker
valid.
Issue 1793
Moved the
list of properties
applying to
::marker
to
[CSS-LISTS-3]
(also adding
content
unicode-bidi
, and
direction
).
Added
::marker
to types allowed for
CSSPseudoElement
interface.
Issue 3763
Clarified return value of
pseudo()
(Issues
3603
and
3607
Allowed highlight overlay of inline-level boxes to extend to the line box edges.
(Issues
5395
and
4624
Clarified that
currentColor
on a
highlight pseudo-element
uses the color that would be used if the text were not “highlighted”,
even if that color was provided by a pseudo-element like
::first-line
Issue 4625
Defined how
text-shadow
interacts with
highlight pseudo-elements
Issue 3932
Improved the
default UA style sheet
rules applying to highlight pseudo-elements.
Changes since the
7 June 2016 Working Draft
include:
Specified
spelling-error
and
grammar-error
with
::spelling-error
and
::grammar-error
in the UA stylesheet.
Redefined value propagation between parent/child highlight pseudo-elements to use inheritance rather than cascading. See discussion in and linked from
Issue 2474
Refined list of supported properties for highlight pseudo-elements, e.g. adding
stroke-color
fill-color
, removing
outline
, etc.
Clarified how text and text decoration colors are painted for highlight pseudo-elements.
Added the
element
attribute to the
CSSPseudoElement
interface.
Changed the values of the
type
attribute on the
CSSPseudoElement
interface to match the corresponding pseudo-elements.
Reduced supported types of
CSSPseudoElement
and removed unimplemented
style
attribute.
Changed
window.
getPseudoElements
elem
type
to
Element.
pseudo
type
Miscellaneous minor clarifications and fixes.
Acknowledgements
The editors would like to specifically thank the following individuals for their
contributions to this specification:
Tab Atkins,
Delan Azabani,
David Baron,
Oriol Brufau,
Razvan Caliman,
Stephen Chenney,
Chris Coyier,
Anders Grimsrud,
Vincent Hardy,
François Remy.
Conformance
Document conventions
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes.
[RFC2119]
Examples in this specification are introduced with the words “for example”
or are set apart from the normative text with
class=
"example"
like this:
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with
class=
"note"
, like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with
"advisement"
, like
this:
UAs MUST provide an accessible alternative.
Tests
Tests relating to the content of this specification
may be documented in “Tests” blocks like this one.
Any such block is non-normative.
Conformance classes
Conformance to this specification
is defined for three conformance classes:
style sheet
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
UA
that writes a style sheet.
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
Partial implementations
So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers
must
treat as invalid (and
ignore
as appropriate
) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents
must not
selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.
Implementations of Unstable and Proprietary Features
To avoid clashes with future stable CSS features,
the CSSWG recommends
following best practices
for the implementation of
unstable
features and
proprietary extensions
to CSS.
Non-experimental implementations
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
Index
Terms defined by this specification
::after
, in § 4.1
::before
, in § 4.1
CSSPseudoElement
, in § 7.1
::details-content
, in § 5.2
element
, in § 7.1
element-backed
, in § 5
element-backed pseudo-element
, in § 5
fictional tag sequence
, in § 2.1.3
::file-selector-button
, in § 5.1
first formatted line
, in § 2.1.1
::first-letter
, in § 2.2
first letter
, in § 2.2
first-letter text
, in § 2.2
::first-line
, in § 2.1
fully styleable
, in § 4
fully styleable pseudo-elements
, in § 4
::grammar-error
, in § 3.1
::highlight()
, in § 3.1
highlight overlay
, in § 3.4
highlight pseudo-element
, in § 3.1
::marker
, in § 4.2
paired default highlight colors
, in § 3.3
parent
, in § 7.1
::placeholder
, in § 4.3
::prefix
, in § 2.2
pseudo(type)
attribute for CSSPseudoElement
, in § 7.1
method for CSSPseudoElement
, in § 7.1
method for Element
, in § 7.2
::search-text
, in § 3.1
::selection
, in § 3.1
::spelling-error
, in § 3.1
::suffix
, in § 2.2
::target-text
, in § 3.1
tree-abiding
, in § 4
Tree-abiding pseudo-elements
, in § 4
type
, in § 7.1
Terms defined by reference
[COMPAT]
defines the following terms:
-webkit-text-fill-color
[CSS-BACKGROUNDS-3]
defines the following terms:
background-color
box-shadow
[CSS-BREAK-4]
defines the following terms:
box fragment
[CSS-CASCADE-5]
defines the following terms:
author origin
cascaded value
computed value
inherit
(for CSS)
inherit
(for all)
inheritance
inherited property
initial value
revert
revert-layer
specified value
unset
used value
[CSS-CASCADE-6]
defines the following terms:
cascade origin
[CSS-COLOR-4]
defines the following terms:

color
currentcolor
highlight
HighlightText
mark
MarkText
opacity
transparent
[CSS-COLOR-ADJUST-1]
defines the following terms:
color-scheme
forced colors mode
forced-color-adjust
[CSS-CONTENT-3]
defines the following terms:
content
none
[CSS-DISPLAY-4]
defines the following terms:
block container
block formatting context
block-level
containing block
display
in-flow
inline
inline block
inline box
inline formatting context
inline-level
inline-level box
inline-level content
list-item
out-of-flow
replaced element
root element
[CSS-FONTS-4]
defines the following terms:
font-family
font-size
[CSS-HIGHLIGHT-API-1]
defines the following terms:
custom highlight
custom highlight name
[CSS-INLINE-3]
defines the following terms:
initial-letter
line box
root inline box
[CSS-LISTS-3]
defines the following terms:
list item
list-style-position
marker
marker box
[CSS-MULTICOL-2]
defines the following terms:
multi-column container
[CSS-PSEUDO-4]
defines the following terms:
::postfix
[CSS-RUBY-1]
defines the following terms:
ruby-position
[CSS-SCOPING-1]
defines the following terms:
:host
:host()
:host-context()
[CSS-SHADOW-PARTS-1]
defines the following terms:
::part()
[CSS-SYNTAX-3]
defines the following terms:
parse
[CSS-TABLES-3]
defines the following terms:
table wrapper box
[CSS-TEXT-3]
defines the following terms:
text-align
[CSS-TEXT-4]
defines the following terms:
content language
typographic character unit
word separator
[CSS-TEXT-DECOR-4]
defines the following terms:
grammar-error
spelling-error
text-decoration
text-emphasis
text-emphasis-position
text-shadow
text-underline-offset
text-underline-position
[CSS-UI-4]
defines the following terms:
caret-color
cursor
outline
[CSS-VALUES-4]
defines the following terms:

em
font-relative lengths
lh
[CSS-VARIABLES-1]
defines the following terms:
custom property
var()
[CSS-WRITING-MODES-3]
defines the following terms:
direction
unicode-bidi
[CSS-WRITING-MODES-4]
defines the following terms:
block axis
text-orientation
writing mode
writing-mode
[CSS2]
defines the following terms:
:after
:first-letter
line-height
pseudo-classes
pseudo-elements
selector
type selector
[CSSOM-1]
defines the following terms:
CSSOMString
CSSStyleDeclaration
getComputedStyle(elt)
[DOM]
defines the following terms:
Element
EventTarget
[FILL-STROKE-3]
defines the following terms:
fill-color
stroke-color
stroke-width
[HTML]
defines the following terms:
details
div
input
placeholder
textarea
[SELECTORS-3]
defines the following terms:
[SELECTORS-4]
defines the following terms:
:current
:future
:has()
:past
:placeholder-shown
:scope
:target

functional pseudo-element
originating element
pseudo-class
pseudo-element
structural pseudo-classes
sub-pseudo-element
ultimate originating element
[URL]
defines the following terms:
fragment
[WEBIDL]
defines the following terms:
Exposed
this
References
Normative References
[COMPAT]
Mike Taylor.
Compatibility Standard
. Living Standard. URL:
[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper.
CSS Backgrounds and Borders Module Level 3
. 11 March 2024. CRD. URL:
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad.
CSS Fragmentation Module Level 4
. 18 December 2018. FPWD. URL:
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr..
CSS Cascading and Inheritance Level 5
. 13 January 2022. CR. URL:
[CSS-CASCADE-6]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr..
CSS Cascading and Inheritance Level 6
. 6 September 2024. WD. URL:
[CSS-COLOR-4]
Chris Lilley; Tab Atkins Jr.; Lea Verou.
CSS Color Module Level 4
. 24 April 2025. CRD. URL:
[CSS-COLOR-ADJUST-1]
Elika Etemad; et al.
CSS Color Adjustment Module Level 1
. 14 June 2022. CRD. URL:
[CSS-CONTENT-3]
Elika Etemad; Dave Cramer.
CSS Generated Content Module Level 3
. 2 August 2019. WD. URL:
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 4
. 19 December 2024. FPWD. URL:
[CSS-FONTS-4]
Chris Lilley.
CSS Fonts Module Level 4
. 1 February 2024. WD. URL:
[CSS-HIGHLIGHT-API-1]
Florian Rivoal; Sanket Joshi; Megan Gardner.
CSS Custom Highlight API Module Level 1
. 15 December 2021. WD. URL:
[CSS-INLINE-3]
Elika Etemad.
CSS Inline Layout Module Level 3
. 18 December 2024. WD. URL:
[CSS-LISTS-3]
Elika Etemad; Tab Atkins Jr..
CSS Lists and Counters Module Level 3
. 17 November 2020. WD. URL:
[CSS-MULTICOL-2]
Florian Rivoal; Rachel Andrew.
CSS Multi-column Layout Module Level 2
. 19 December 2024. FPWD. URL:
[CSS-PSEUDO-4]
Daniel Glazman; Elika Etemad; Alan Stearns.
CSS Pseudo-Elements Module Level 4
. 30 December 2022. WD. URL:
[CSS-RUBY-1]
Elika Etemad; et al.
CSS Ruby Annotation Layout Module Level 1
. 31 December 2022. WD. URL:
[CSS-SCOPING-1]
Tab Atkins Jr.; Elika Etemad.
CSS Scoping Module Level 1
. 3 April 2014. FPWD. URL:
[CSS-SHADOW-PARTS-1]
Tab Atkins Jr.; Fergal Daly.
CSS Shadow Parts
. 15 November 2018. FPWD. URL:
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin.
CSS Syntax Module Level 3
. 24 December 2021. CRD. URL:
[CSS-TABLES-3]
François Remy; Greg Whitworth; David Baron.
CSS Table Module Level 3
. 27 July 2019. WD. URL:
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal.
CSS Text Module Level 3
. 30 September 2024. CRD. URL:
[CSS-TEXT-4]
Elika Etemad; et al.
CSS Text Module Level 4
. 29 May 2024. WD. URL:
[CSS-TEXT-DECOR-4]
Elika Etemad; Koji Ishii.
CSS Text Decoration Module Level 4
. 4 May 2022. WD. URL:
[CSS-UI-4]
Florian Rivoal.
CSS Basic User Interface Module Level 4
. 16 March 2021. WD. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. 12 March 2024. WD. URL:
[CSS-VARIABLES-1]
Tab Atkins Jr..
CSS Custom Properties for Cascading Variables Module Level 1
. 16 June 2022. CR. URL:
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 3
. 10 December 2019. REC. URL:
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 4
. 30 July 2019. CR. URL:
[CSS2]
Bert Bos; et al.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
. 7 June 2011. REC. URL:
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez.
CSS Object Model (CSSOM)
. 26 August 2021. WD. URL:
[DOM]
Anne van Kesteren.
DOM Standard
. Living Standard. URL:
[FILL-STROKE-3]
Elika Etemad; Tab Atkins Jr..
CSS Fill and Stroke Module Level 3
. 13 April 2017. FPWD. URL:
[HTML]
Anne van Kesteren; et al.
HTML Standard
. Living Standard. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
[SELECTORS-4]
Elika Etemad; Tab Atkins Jr..
Selectors Level 4
. 11 November 2022. WD. URL:
[UAX44]
Ken Whistler.
Unicode Character Database
. 27 August 2024. Unicode Standard Annex #44. URL:
[URL]
Anne van Kesteren.
URL Standard
. Living Standard. URL:
[WEBIDL]
Edgar Chen; Timothy Gu.
Web IDL Standard
. Living Standard. URL:
Informative References
[CSS-BACKGROUNDS-4]
Bert Bos; Elika J. Etemad; Lea Verou.
CSS Backgrounds and Borders Module Level 4
. Proposal for a CSS module. URL:
[CSS-CASCADE-4]
Elika Etemad; Tab Atkins Jr..
CSS Cascading and Inheritance Level 4
. 13 January 2022. CR. URL:
[CSS-DISPLAY-3]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 3
. 30 March 2023. CR. URL:
[CSS22]
Bert Bos.
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
. 12 April 2016. FPWD. URL:
[HTML5]
Ian Hickson; et al.
HTML5
. 27 March 2018. REC. URL:
[SELECTORS-3]
Tantek Çelik; et al.
Selectors Level 3
. 6 November 2018. REC. URL:
[UAX29]
Josh Hadley.
Unicode Text Segmentation
. 28 August 2024. Unicode Standard Annex #29. URL:
[WEB-ANIMATIONS-1]
Brian Birtles; et al.
Web Animations
. 5 June 2023. WD. URL:
IDL Index
Exposed
Window
interface
CSSPseudoElement
EventTarget
readonly
attribute
CSSOMString
type
readonly
attribute
Element
element
readonly
attribute
Element
or
CSSPseudoElement
parent
CSSPseudoElement
pseudo
CSSOMString
type
);
};
partial
interface
Element
CSSPseudoElement
pseudo
CSSOMString
type
);
};
Issues Index
Are there any other properties that should be included here?
UA tweaks to the presentation of highlights
in ways that
are
controlled by CSS
are currently under discussion
in
Issue 6853
See
F2F minutes
dbaron’s message
Daniel’s thread
Gecko notes
Opera notes
Webkit notes
Not sure if this is the correct way of describing the way things work.
Interaction of
::marker
and
::first-line
is currently under discussion in
Issue 4506
Should
::marker
also have
::prefix
and
::suffix
sub-elements?
Authors seem to want
text-align
on the list of supported properties.
See e.g.
comments here
This interface is under design development,
and this draft is looking for feedback more than implementation.
The CSSWG would particularly appreciate hearing about use cases and problems.
The identity, lifetime, and nullness of the return value
(and potential error cases)
of the
pseudo()
method is still under discussion.
See
Issue 3607
and
Issue 3603