spec:css-values-4; type:dfn; text:identifier

spec:css-display-3; type:property; text:display

spec:css-pseudo-4; type:selector;

text: ::before

text: ::after

text: ::first-line

text: ::first-letter

spec:dom; type:dfn; text:descendant

spec:html; type:dfn; text:muted

spec:html; type:element-attr; for:a; text:href

spec:html; type:element;

text:meta

text:audio

#selector-examples td:first-child {

white-space: nowrap;

}

<em>This section is not normative.</em>

A <a>selector</a> is a boolean predicate

that takes an element in a tree structure

and tests whether the element matches the selector or not.

These expressions may be used for many things:

<ul>

<li>

directly on an element to test whether it matches some criteria,

such as in the <code>element.matches()</code> function defined in [[DOM]]

<li>

applied to an entire tree of elements

to filter it into a set of elements that match the criteria,

such as in the <code>document.querySelectorAll()</code> function defined in [[DOM]]

or the selector of a CSS style rule.

<li>

used "in reverse" to generate markup that would match a given selector,

such as in <a href="http://haml.info/">HAML</a> or <a href="https://en.wikipedia.org/wiki/Emmet_(software)">Emmet</a>.

</ul>

Selectors Levels 1, 2, and 3 are defined as the subsets of selector

functionality defined in the <a href="https://www.w3.org/TR/REC-CSS1">CSS1</a>,

<a href="https://www.w3.org/TR/CSS21/">CSS2.1</a>, and

<a href="https://www.w3.org/TR/css3-selectors/">Selectors Level 3</a>

specifications, respectively. This module defines Selectors Level 4.

This module replaces the definitions of

and extends the set of selectors defined for CSS in [[SELECT]] and [[CSS21]].

Pseudo-element selectors,

which define abstract elements in a rendering tree,

are not part of this specification:

their generic syntax is described here,

but, due to their close integration with the rendering model and irrelevance to other uses such as DOM queries,

they will be defined in other modules.

<em>This section is non-normative, as it merely summarizes the

following sections.</em>

A selector represents a structure. This structure can be used as a

condition (e.g. in a CSS rule) that determines which elements a

selector matches in the document tree, or as a flat description of the

HTML or XML fragment corresponding to that structure.

Selectors may range from simple element names to rich contextual

representations.

The following table summarizes the Selector syntax:

<table class="data" id="selector-examples">

<col class="pattern">

<col class="meaning">

<col class="section">

<col class="level">

<thead>

<tr>

<th>Pattern

<th>Represents

<th>Section

<th>Level

<tbody>

<tr>

<td><code>*</code>

<td>any element

<td>[[#the-universal-selector]]

<td>2

<tr>

<td><code>E</code>

<td>an element of type E

<td>[[#type-selectors]]

<td>1

<tbody>

<tr>

<td><code>E:not(<var>s1</var>, <var>s2</var>, &hellip;)</code>

<td>an E element that does not match either <a>compound selector</a> <var>s1</var>

or <a>compound selector</a> <var>s2</var>

<td>[[#negation]]

<td>3/4

<tr>

<td><code>E:is(<var>s1</var>, <var>s2</var>, &hellip;)</code>

<td>an E element that matches <a>compound selector</a> <var>s1</var>

and/or <a>compound selector</a> <var>s2</var>

<td>[[#matches]]

<td>4

<tr>

<td><code>E:where(<var>s1</var>, <var>s2</var>, &hellip;)</code>

<td>an E element that matches <a>compound selector</a> <var>s1</var>

and/or <a>compound selector</a> <var>s2</var> but contributes no specificity.

<td>[[#zero-matches]]

<td>4

<tr>

<td><code>E:has(<var>rs1</var>, <var>rs2</var>, &hellip;)</code>

<td>an E element,

if there exists an element that matches

either of the <a>relative selectors</a> <var>rs1</var> or <var>rs2</var>,

when evaluated with E as the <a>anchor elements</a>

<td>[[#relational]]

<td>4

<tbody>

<tr>

<td><code>E.warning</code>

<td>an E element belonging to the class <code>warning</code>

(the document language specifies how class is determined).

<td>[[#class-html]]

<td>1

<tr>

<td><code>E#myid</code>

<td>an E element with ID equal to <code>myid</code>.

<td>[[#id-selectors]]

<td>1

<tr>

<td><code>E[foo]</code>

<td>an E element with a <code>foo</code> attribute

<td>[[#attribute-representation]]

<td>2

<tr>

<td><code>E[foo="bar"]</code>

<td>an E element whose <code>foo</code> attribute value is

exactly equal to <code>bar</code>

<td>[[#attribute-representation]]

<td>2

<tr>

<td><code>E[foo="bar" i]</code>

<td>an E element whose <code>foo</code> attribute value is

exactly equal to any (ASCII-range) case-permutation of <code>bar</code>

<td>[[#attribute-case]]

<td>4

<tr>

<td><code>E[foo="bar" s]</code>

<td>an E element whose <code>foo</code> attribute value is

[=identical to=] <code>bar</code>

<td>[[#attribute-case]]

<td>4

<tr>

<td><code>E[foo~="bar"]</code>

<td>an E element whose <code>foo</code> attribute value is

a list of whitespace-separated values, one of which is

exactly equal to <code>bar</code>

<td>[[#attribute-representation]]

<td>2

<tr>

<td><code>E[foo^="bar"]</code>

<td>an E element whose <code>foo</code> attribute value

begins exactly with the string <code>bar</code>

<td>[[#attribute-substrings]]

<td>3

<tr>

<td><code>E[foo$="bar"]</code>

<td>an E element whose <code>foo</code> attribute value

ends exactly with the string <code>bar</code>

<td>[[#attribute-substrings]]

<td>3

<tr>

<td><code>E[foo*="bar"]</code>

<td>an E element whose <code>foo</code> attribute value

contains the substring <code>bar</code>

<td>[[#attribute-substrings]]

<td>3

<tr>

<td><code>E[foo|="en"]</code>

<td>an E element whose <code>foo</code> attribute value is

a hyphen-separated list of values beginning with <code>en</code>

<td>[[#attribute-representation]]

<td>2

<tbody>

<tr>

<td><code>E:dir(ltr)</code>

<td>an element of type E with left-to-right directionality

(the document language specifies how directionality is determined)

<td>[[#the-dir-pseudo]]

<td>4

<tr>

<td><code>E:lang(zh, "*-hant")</code>

<td>an element of type E tagged as being either in Chinese

(any dialect or writing system)

or otherwise written with traditional Chinese characters

<td>[[#the-lang-pseudo]]

<td>2/4

<tbody>

<tr>

<td><code>E:any-link</code>

<td>an E element being the source anchor of a hyperlink

<td>[[#the-any-link-pseudo]]

<td>4

<tr>

<td><code>E:link</code>

<td>an E element being the source anchor of a hyperlink

of which the target is not yet visited

<td>[[#link]]

<td>1

<tr>

<td><code>E:visited</code>

<td>an E element being the source anchor of a hyperlink

of which the target is already visited

<td>[[#link]]

<td>1

<tr>

<td><code>E:local-link</code>

<td>an E element being the source anchor of a hyperlink

targeting the current URL

<td>[[#the-local-link-pseudo]]

<td>4

<tr>

<td><code>E:target</code>

<td>an E element being the target of the current URL

<td>[[#the-target-pseudo]]

<td>3

<tr>

<td><code>E:target-within</code>

<td>an E element that is the target of the current URL or contains an element that does.

<td>[[#the-target-within-pseudo]]

<td>4

<tr>

<td><code>E:scope</code>

<td>an E element being a [=scoping root=]

<td>[[#the-scope-pseudo]]

<td>4

<tbody>

<tr>

<td><code>E:current</code>

<td>an E element that is currently presented in a time-dimensional canvas

<td>[[#the-current-pseudo]]

<td>4

<tr>

<td><code>E:current(<var>s</var>)</code>

<td>an E element that is the deepest '':current'' element that

matches selector <var>s</var>

<td>[[#the-current-pseudo]]

<td>4

<tr>

<td><code>E:past</code>

<td>an E element that is in the past in a time-dimensional canvas

<td>[[#the-past-pseudo]]

<td>4

<tr>

<td><code>E:future</code>

<td>an E element that is in the future in a time-dimensional canvas

<td>[[#the-future-pseudo]]

<td>4

<tbody>

<tr>

<td><code>E:active</code>

<td>an E element that is in an activated state

<td>[[#the-active-pseudo]]

<td>1

<tr>

<td><code>E:hover</code>

<td>an E element that is under the cursor,

or that has a descendant under the cursor

<td>[[#the-hover-pseudo]]

<td>2

<tr>

<td><code>E:focus</code>

<td>an E element that has user input focus

<td>[[#the-focus-pseudo]]

<td>2

<tr>

<td><code>E:focus-within</code>

<td>an E element that has user input focus or contains an element that has input focus.

<td>[[#the-focus-within-pseudo]]

<td>4

<tr>

<td><code>E:focus-visible</code>

<td>an E element that has user input focus,

and the UA has determined that a focus ring or other indicator

should be drawn for that element

<td>[[#the-focus-visible-pseudo]]

<td>4

<tbody>

<tr>

<td><code>E:enabled<br>E:disabled</code>

<td>a user interface element E that is enabled or disabled, respectively

<td>[[#enableddisabled]]

<td>3

<tr>

<td><code>E:read-write</code><br><code>E:read-only</code>

<td>a user interface element E that is user alterable, or not

<td>[[#rw-pseudos]]

<td>3-UI/4

<tr>

<td><code>E:placeholder-shown</code>

<td>an input control currently showing placeholder text

<td>[[#placeholder]]

<td>3-UI/4

<tr>

<td><code>E:default</code>

<td>a user interface element E that is the default item in a group of related choices

<td>[[#the-default-pseudo]]

<td>3-UI/4

<tr>

<td><code>E:checked</code>

<td>a user interface element E that is checked/selected

(for instance a radio-button or checkbox)

<td>[[#checked]]

<td>3

<tr>

<td><code>E:indeterminate</code>

<td>a user interface element E that is in an indeterminate state

(neither checked nor unchecked)

<td>[[#indeterminate]]

<td>4

<tr>

<td><code>E:valid</code><br><code>E:invalid</code>

<td>a user-input element E that meets, or doesn't, its data validity semantics

<td>[[#validity-pseudos]]

<td>3-UI/4

<tr>

<td><code>E:in-range</code><br><code>E:out-of-range</code>

<td>a user-input element E whose value is in-range/out-of-range

<td>[[#range-pseudos]]

<td>3-UI/4

<tr>

<td><code>E:required</code><br><code>E:optional</code>

<td>a user-input element E that requires/does not require input

<td>[[#opt-pseudos]]

<td>3-UI/4

<tr>

<td><code>E:blank</code>

<td>a user-input element E whose value is blank (empty/missing)

<td>[[#blank]]

<td>4

<tr>

<td><code>E:user-invalid</code>

<td>a user-altered user-input element E with incorrect input (invalid, out-of-range, omitted-but-required)

<td>[[#user-pseudos]]

<td>4

<tbody>

<tr>

<td><code>E:root</code>

<td>an E element, root of the document

<td>[[#the-root-pseudo]]

<td>3

<tr>

<td><code>E:empty</code>

<td>an E element that has no children (neither elements nor text) except perhaps white space

<td>[[#the-empty-pseudo]]

<td>3

<tr>

<td><code>E:nth-child(<var>n</var> [of <var>S</var>]?)</code>

<td>an E element, the <var>n</var>-th child of its parent matching <var>S</var>

<td>[[#the-nth-child-pseudo]]

<td>3/4

<tr>

<td><code>E:nth-last-child(<var>n</var> [of <var>S</var>]?)</code>

<td>an E element, the <var>n</var>-th child of its parent matching <var>S</var>,

counting from the last one

<td>[[#the-nth-last-child-pseudo]]

<td>3/4

<tr>

<td><code>E:first-child</code>

<td>an E element, first child of its parent

<td>[[#the-first-child-pseudo]]

<td>2

<tr>

<td><code>E:last-child</code>

<td>an E element, last child of its parent

<td>[[#the-last-child-pseudo]]

<td>3

<tr>

<td><code>E:only-child</code>

<td>an E element, only child of its parent

<td>[[#the-only-child-pseudo]]

<td>3

<tr>

<td><code>E:nth-of-type(<var>n</var>)</code>

<td>an E element, the <var>n</var>-th sibling of its type

<td>[[#the-nth-of-type-pseudo]]

<td>3

<tr>

<td><code>E:nth-last-of-type(<var>n</var>)</code>

<td>an E element, the <var>n</var>-th sibling of its type,

counting from the last one

<td>[[#the-nth-last-of-type-pseudo]]

<td>3

<tr>

<td><code>E:first-of-type</code>

<td>an E element, first sibling of its type

<td>[[#the-first-of-type-pseudo]]

<td>3

<tr>

<td><code>E:last-of-type</code>

<td>an E element, last sibling of its type

<td>[[#the-last-of-type-pseudo]]

<td>3

<tr>

<td><code>E:only-of-type</code>

<td>an E element, only sibling of its type

<td>[[#the-only-of-type-pseudo]]

<td>3

<tbody>

<tr>

<td><code>E F</code>

<td>an F element descendant of an E element

<td>[[#descendant-combinators]]

<td>1

<tr>

<td><code>E > F</code>

<td>an F element child of an E element

<td>[[#child-combinators]]

<td>2

<tr>

<td><code>E + F</code>

<td>an F element immediately preceded by an E element

<td>[[#adjacent-sibling-combinators]]

<td>2

<tr>

<td><code>E ~ F</code>

<td>an F element preceded by an E element

<td>[[#general-sibling-combinators]]

<td>3

<tbody>

<tr>

<td><code>F || E</code>

<td>an E element that represents a cell in a grid/table

belonging to a column represented by an element F

<td>[[#the-column-combinator]]

<td>4

<tr>

<td><code>E:nth-col(<var>n</var>)</code>

<td>an E element that represents a cell belonging to the

<var>n</var>th column in a grid/table

<td>[[#the-nth-col-pseudo]]

<td>4

<tr>

<td><code>E:nth-last-col(<var>n</var>)</code>

<td>an E element that represents a cell belonging to the

<var>n</var>th column in a grid/table, counting from the last one

<td>[[#the-nth-last-col-pseudo]]

<td>4

</table>

Note: Some Level 4 selectors (noted above as "3-UI") were introduced in [[CSS3UI]].

A <dfn export>selector</dfn> represents

a particular pattern of element(s) in a tree structure.

The term <a>selector</a> can refer to a <a>simple selector</a>,

<a>compound selector</a>, <a>complex selector</a>, or <a>selector list</a>.

The <dfn export for=selector lt="subject|subject of a selector|subject of the selector">subject of a selector</dfn> is

any element that selector is defined to be about;

that is, any element <dfn export lt="match">matching</dfn> that <a>selector</a>.

A <dfn id="simple" export>simple selector</dfn>

is a single condition on an element.

A <a>type selector</a>,

<a>universal selector</a>,

<a>attribute selector</a>,

<a>class selector</a>,

<a>ID selector</a>,

or <a>pseudo-class</a>

is a <a>simple selector</a>.

(It is represented by <<simple-selector>>

in the selectors <a href="#grammar">grammar</a>.)

A given element is said to <a>match</a> a <a>simple selector</a>

when that <a>simple selector</a>,

as defined in this specification and in accordance with the <a>document language</a>,

accurately describes the element.

A <dfn id="compound" export>compound selector</dfn>

is a sequence of <a>simple selectors</a>

that are not separated by a <a for=selector>combinator</a>,

and represents a set of simultaneous conditions on a single element.

If it contains a <a>type selector</a> or <a>universal selector</a>,

that selector must come first in the sequence.

Only one type selector or universal selector is allowed in the sequence.

(A <a>compound selector</a> is represented by <<compound-selector>>

in the selectors <a href="#grammar">grammar</a>.)

A given element is said to <a>match</a> a <a>compound selector</a>

when it matches all <a>simple selectors</a> in the <a>compound selector</a>.

Note: As whitespace represents the <a>descendant combinator</a>,

no whitespace is allowed between the <a>simple selectors</a>

in a <a>compound selector</a>.

A <dfn id=pseudo-compound>pseudo-compound selector</dfn>

is a [=pseudo-element=] selector,

optionally followed by additional [=pseudo-class=] selectors,

and optionally preceded by a [=compound selector=]

or another [=pseudo-compound selector=],

without any [=selector/combinators=].

(A <a>pseudo-compound selector</a> is represented by <<pseudo-compound-selector>>

in the selectors <a href="#grammar">grammar</a>.)

A [=pseudo-element=] [=matches=] a [=pseudo-compound selector=]

when it has the specified pseudo-element name,

matches the additional conditions represented by any [=pseudo-classes=],

and has an [=originating element=]

represented by the adjacent preceding selector.

If there is no adjacent preceding selector,

the [=universal selector=] is assumed.

(For example, ''.foo ::before''

is equivalent to ''.foo *::before'',

and distinct from ''.foo::before''.)

<div class=example>

For example, in ''.foo::before:hover'',

the ''.foo'' is a [=compound selector=],

while the ''::before:hover'' is a [=pseudo-compound selector=].

However, in ''.foo::before::marker'',

''::before'' and ''::marker'' are separate [=pseudo-compound selectors=].

</div>

Note: A [=pseudo-compound selector=] <strong>is not</strong>

a [=compound selector=],

and can't be used in places that expect a [=compound selector=] only.

[=Pseudo-compound selectors=] act as if they carry a [=selector/combinator=] with themselves,

expressing their relationship with their [=originating element=],

just as the ''>'' combinator

expresses a relationship with a parent element.

A <dfn export for=selector>combinator</dfn>

is a condition of relationship between two elements

represented by the <a>compound selectors</a> on either side.

Combinators in Selectors Level 4 include:

the <a>descendant combinator</a> (white space),

the <a>child combinator</a> (U+003E, <code>></code>),

the <a>next-sibling combinator</a> (U+002B, <code>+</code>),

and the <a>subsequent-sibling combinator</a> (U+007E, <code>~</code>).

Two given elements are said to <a>match</a> a <a for=selector>combinator</a>

when the condition of relationship between these elements is true.

A <dfn id="complex" export>complex selector</dfn> is

a sequence of one or more <a>compound selectors</a>

and/or [=pseudo-compound selectors=],

with [=compound selectors=] separated by <a for=selector>combinators</a>.

It represents a set of simultaneous conditions

on a set of elements in the particular relationships

described by its <a for=selector>combinators</a>.

(Complex selectors are represented by <<complex-selector>>

in the selectors <a href="#grammar">grammar</a>.)

A given element or pseudo-element

is said to <a>match</a> a <a>complex selector</a>

when it matches the final [=compound selector|compound=]/[=pseudo-compound selector=] in the sequence,

and every preceding unit of the sequence also [=matches=]

an element or [=pseudo-element=],

with the correct relationship between consecutive units

as expressed by the combinators separating them

(or, for [=pseudo-compound selectors=],

the correct [=originating element=] relationship).

<div class=example>

For example, ''.foo.bar'' matches an element

with both "foo" and "bar" classes.

''.ancestor > .foo.bar'' matches a subset of those elements:

only those whose parent element

(as indicated by the ''>'' combinator)

has the "ancestor" class.

''.foo.bar::before'' matches a ''::before'' pseudo-element,

whose [=originating element=] matches ''.foo.bar''.

</div>

A <dfn export lt="list of simple selectors|list of compound selectors|list of complex selectors">list of simple/compound/complex selectors</dfn>

is a comma-separated list of

<a lt="simple selector">simple</a>,

<a lt="compound selector">compound</a>,

or <a>complex selectors</a>.

This is also called just a <dfn export lt="selector list|list of selectors">selector list</dfn>

when the type is either unimportant or specified in the surrounding prose;

if the type is important and unspecified,

it defaults to meaning a <a>list of complex selectors</a>.

(See [[#grouping]] for additional information on <a>selector lists</a>

and the various &lt;*-selector-list> productions in the <a href="#grammar">grammar</a>

for their formal syntax.)

A given element is said to <a>match</a> a <a>selector list</a>

when it matches any (at least one) of the <a>selectors</a>

in that <a>selector list</a>.

Selectors are evaluated against an element tree such as the DOM. [[!DOM]]

Within this specification,

this may be referred to as the "document tree" or "source document".

Each element may have any of the following five aspects,

which can be selected against,

all of which are matched as strings:

<ul>

<li>The element's type (also known as its tag name).

<li>The element's namespace.

<li>An ID.

<li>Classes (named groups) to which it belongs.

<li>Attributes, which are name-value pairs.

</ul>

Many of the selectors depend on the semantics of the <dfn export>document language</dfn>

(i.e. the language and semantics of the document tree)

and/or the semantics of the <dfn>host language</dfn>

(i.e. the language that is using selectors syntax).

For example, the '':lang()'' selector depends on the <a>document language</a> (e.g. HTML)

to define how an element is associated with a language.

As a slightly different example, the ''::first-line'' pseudo-element

depends on the <a>host language</a> (e.g. CSS)

to define what a ''::first-line'' pseudo-element represents

and what it can do.

While individual elements may lack any of the above features,

some elements are <dfn export>featureless</dfn>.

A <a>featureless</a> element does not match <em>any selector at all</em>,

except:

* [=simple selectors=] it is explicitly defined to match

* [=compound selectors=],

if all contained [=simple selectors=]

are allowed to match it

* [=complex selectors=],

if the [=compound selector=] targeting the [=selector/subject=]

is allowed to match it

* [=selector lists=],

if at least one selector in the list

is allowed to match it

* [=logical combination pseudo-classes=],

if their argument selector is allowed to match it

* the '':has()'' pseudo-class,

if and only if the [=compound selector=] it's part of

contains at least one <em>other</em> [=simple selector=]

that's allowed to match it.

If a selector would otherwise match a [=featureless=] element,

except for the existence of the default namespace [[CSS-NAMESPACES-3]]

(because [=featureless=] elements do not have a namespace

unless otherwise defined),

the default namespace does not prevent the match.

<div class='example'>

For example, the [=shadow host=] in a [=shadow tree=] is [=featureless=],

and can't be matched by <em>any</em> [=pseudo-class=]

except for '':host'' and '':host-context()''

(or combinations including those,

such as '':is(:host, :root)'').

Logical combinations like '':not(.foo:host)''

will never match the host element

(even if it doesn't have a "foo" class),

because not all of the simple selectors in ''.foo:host''

are allowed to match the [=shadow host=].

Similarly, '':not(:host > .foo)'' will never match the [=shadow host=],

even tho the [=shadow host=] is indeed *not* a descendant of itself

and doesn't have the "foo" class,

because the subject of the complex selector argument (''.foo'')

isn't allowed to match the [=shadow host=].

</div>

<div class='example'>

In general, you can't match a [=featureless=] element

without explicitly using one of the [=simple selectors=]

it's allowed to match,

to avoid accidentally selecting one of these elements

(which are otherwise <em>intentionally</em> easy to not think about).

For example, ''*'' will never match a [=featureless=] element.

The rule for '':has()'', above, works similarly.

Even if a [=shadow host=] contains a ''.foo'' descendant,

'':has(.foo)'' will not match it,

because <em>the rest</em> of the compound selector

(empty)

doesn't contain a simple selector that can match the host.

You have to write '':host:has(.foo)'' in order to match the host element.

</div>

Some host applications may choose to <dfn export lt="scoped selector" local-lt="scope">scope</dfn> selectors

to a particular subtree or fragment of the document,

The root of the scoping subtree is called the <dfn export>scoping root</dfn>.

When a selector is <a>scoped</a>,

it matches an element only if the element is a descendant of the <a>scoping root</a>.

(The rest of the selector can match unrestricted;

it's only the final matched elements that must be within the scope.)

<div class='example'>

For example,

the {{Element/querySelector()}} method defined in [[DOM]]

allows the author to evaluate a <a>scoped</a> selector

relative to the element it's called on.

A call like <code highlight=js>widget.querySelector("a")</code>

will thus only find <{a}> elements inside of the <code>widget</code> element,

ignoring any other <{a}>s that might be scattered throughout the document.

</div>

Certain contexts may accept <dfn lt="relative selector" local-lt="relative" export>relative selectors</dfn>,

which are a shorthand for selectors that represent elements relative to one or more

<dfn export local-lt="anchor element">relative selector anchor elements</dfn>.

Relative selectors begin with a <a for=selector>combinator</a>,

with a selector representing the [=anchor element=]

implied at the start of the selector.

(If no combinator is present,

the [=descendant combinator=] is implied.)

Relative selectors are represented by <<relative-selector>> in the selectors <a href="#grammar">grammar</a>,

and lists of them by <<relative-selector-list>>.

<dfn export id="pseudo-class" lt="pseudo-class">Pseudo-classes</dfn> are <a>simple selectors</a>

that permit selection based on

information that lies outside of the document tree

or that can be awkward or impossible to express using the other simple selectors.

They can also be dynamic,

in the sense that an element can acquire or lose a pseudo-class

while a user interacts with the document,

without the document itself changing.

<a>Pseudo-classes</a> do not appear in or modify the document source or document tree.

The syntax of a <a>pseudo-class</a>

consists of a ":" (U+003A COLON)

followed by the name of the <a>pseudo-class</a>

as a CSS <a>identifier</a>,

and, in the case of a <dfn export id="functional-pseudo-class">functional pseudo-class</dfn>,

a pair of parentheses containing its arguments.

<p class="example">

For example, '':valid'' is a regular pseudo-class,

and '':lang()'' is a <a>functional pseudo-class</a>.

Like all CSS keywords, <a>pseudo-class</a> names are <a>ASCII case-insensitive</a>.

No <a>white space</a> is allowed between the colon and the name of the <a>pseudo-class</a>,

nor, as usual for CSS syntax,

between a <a>functional pseudo-class</a>’s name and its opening parenthesis

(which thus form a CSS <a>function token</a>).

Also as usual,

<a>white space</a> is allowed around the arguments inside the parentheses

of a functional pseudo-class

unless otherwise specified.

Like other <a>simple selectors</a>,

<a>pseudo-classes</a> are allowed in all <a>compound selectors</a> contained in a selector,

and must follow the <a>type selector</a> or <a>universal selector</a>, if present.

Note: Some <a>pseudo-classes</a> are mutually exclusive

(such that a <a>compound selector</a> containing them, while valid, will never match anything),

while others can apply simultaneously to the same element.

Similar to how certain <a>pseudo-classes</a> represent additional state information

not directly present in the document tree,

a <dfn export id="pseudo-element">pseudo-element</dfn> represents an <em>element</em>

not directly present in the document tree.

They are used to create abstractions about the document tree

beyond those provided by the document tree.

For example,

pseudo-elements can be used to select portions of the document

that do not correspond to a document-language element

(including such ranges as don't align to element boundaries or fit within its tree structure);

that represent content not in the document tree or in an alternate projection of the document tree;

or that rely on information provided by styling, layout, user interaction, and other processes that are not reflected in the document tree.

<div class="example">

For instance, document languages do not offer mechanisms to access

the first letter or first line of an element's content,

but there exist <a>pseudo-elements</a>

(''::first-letter'' and ''::first-line'')

that allow those things to be styled.

Notice especially that in the case of ''::first-line'',

which portion of content is represented by the pseudo-element

depends on layout information

that cannot be inferred from the document tree.

<a>Pseudo-elements</a> can also represent content that doesn't exist in the source document at all,

such as the ''::before'' and ''::after'' pseudo-elements

which allow additional content to be inserted before or after the contents of any element.

</div>

Like <a>pseudo-classes</a>,

<a>pseudo-elements</a> do not appear in or modify the document source or document tree.

Accordingly, they also do not affect the interpretation of <a>structural pseudo-classes</a>

or other selectors pertaining to their <a>originating element</a> or its tree.

The host language defines which pseudo-elements exist, their type, and their abilities.

Pseudo-elements that exist in CSS

are defined in [[CSS21]] (Level 2), [[SELECT]] (Level 3), and [[CSS-PSEUDO-4]] (Level 4).

The syntax of a <a>pseudo-element</a>

is "::" (two U+003A COLON characters)

followed by the name of the <a>pseudo-element</a> as an <a>identifier</a>,

and, in the case of a <dfn export id="functional-pseudo-element">functional pseudo-element</dfn>,

a pair of parentheses containing its arguments.

<a>Pseudo-element</a> names are <a>ASCII case-insensitive</a>.

No <a>white space</a> is allowed between the two colons, or between the colons and the name.

Because <a href="https://www.w3.org/TR/CSS1">CSS Level 1</a> and <a href="https://www.w3.org/TR/CSS2">CSS Level 2</a>

conflated pseudo-elements and pseudo-classes by sharing a single-colon syntax for both,

user agents must also accept the previous one-colon notation

for the Level 1 &amp; 2 pseudo-elements

(''::before'', ''::after'', ''::first-line'', and ''::first-letter'').

This compatibility notation is not allowed for any other <a>pseudo-elements</a>.

However, as this syntax is deprecated,

authors should use the Level 3+ double-colon syntax for these <a>pseudo-elements</a>.

<a>Pseudo-elements</a> are <a>featureless</a>,

and so can't be matched by any other selector.

<a>Pseudo-elements</a> do not exist independently in the tree:

they are always bound to another element on the page,

called their <dfn export>originating element</dfn>.

Syntactically, a <a>pseudo-element</a> immediately follows

the <a>compound selector</a> representing its <a>originating element</a>.

If this <a>compound selector</a> is omitted,

it is assumed to be the <a>universal selector</a> ''*''.

<div class='example'>

For example, in the selector ''div a::before'',

the ''a'' elements matched by the selector are the <a>originating elements</a>

for the ''::before'' pseudo-elements attached to them.

The selector ''::first-line'' is equivalent to ''*::first-line'',

which selects the ''::first-line'' pseudo-element on <em>every</em> element in the document.

</div>

When a <a>pseudo-element</a> is encountered in a selector,

the part of the selector before the <a>pseudo-element</a> selects the <a>originating element</a> for the <a>pseudo-element</a>;

the part of the selector after it, if any, applies to the <a>pseudo-element</a> itself.

(See below.)

Certain [=pseudo-elements=] may be immediately followed

by any combination of certain [=pseudo-classes=],

in which case the <a>pseudo-element</a> is represented only when it is in the corresponding state.

This specification allows any <a>pseudo-element</a> to be followed

by any combination of the [=logical combination pseudo-classes=]

and the [=user action pseudo-classes=].

Other specifications may allow additional [=pseudo-classes=]

to be attached to particular [=pseudo-elements=].

Combinations that are not explicitly allowed are [=invalid selectors=].

Note: The [=logical combination pseudo-classes=]

pass any restrictions on validity of selectors at their position

to their arguments.

<div class="example">

For example, since the '':hover'' pseudo-class specifies

that it can apply to any pseudo-element,

''::first-line:hover'' will match when the first line is hovered.

However, since neither '':focus'' nor ''::first-line''

define that '':focus'' can apply to ''::first-line'',

the selector ''::first-line:focus'' will never match anything.

Notice that ''::first-line:hover'' is very different from '':hover::first-line'',

which matches the first line of any originating element that is hovered!

For example, '':hover::first-line'' also matches the first line of a paragraph

when the second line of the paragraph is hovered,

whereas ''::first-line:hover'' only matches if the first line itself is hovered.

</div>

Some [=pseudo-elements=] are able to be the [=originating element=]

of other [=pseudo-elements=],

which are defined as the <dfn export lt="sub-pseudo-element">sub-pseudo-elements</dfn>

of this <dfn export>originating pseudo-element</dfn>.

For example,

when ''::before'' is given a ''display/list-item'' [=display type=],

it becomes the [=originating pseudo-element=]

of its ''::before::marker'' [=sub-pseudo-element=].

Where disambiguation is needed,

the term <dfn export>ultimate originating element</dfn>

refers to the real (non-pseudo) element

from which a [=pseudo-element=] originates.

Unless the corresponding [=sub-pseudo-element=]

is explicitly defined to exist in another specification,

pseudo-element selectors are not valid

when compounded to another pseudo-element selector.

So, for example, ''::before::before'' is an invalid selector,

but ''::before::marker'' is valid

(in implementations that support the ''::before::marker'' [=sub-pseudo-element=]).

Some <a>pseudo-elements</a> are defined to have internal structure.

These <a>pseudo-elements</a> may be followed by child/descendant combinators

to express those relationships.

Selectors containing <a for=selector>combinators</a> after the pseudo-element

are otherwise invalid.

<div class="example">

For example, ''::first-letter + span'' and ''::first-letter em'' are invalid selectors.

However, if a new ''::shadow'' pseudo-element were defined to have internal structure,

''::shadow > p'' would be a valid selector.

</div>

Note: A future specification may expand the capabilities of existing pseudo-elements,

so some of these currently-invalid selectors (e.g. ''::first-line :any-link'')

may become valid in the future.

The children of such <a>pseudo-elements</a> can simultaneously be children of other elements, too.

However, at least in CSS, their rendering must be defined so as to maintain the tree-ness of the <a>box tree</a>.

<!--

<div class='example'>

For example,

the ''::slotted'' pseudo-element treats elements distributed to it as its children.

This means that, given the following fragment:

<pre>

&lt;div>

&lt;span>foo&lt;/span>

&lt;"shadow root">

&lt;content>&lt;/content>

&lt;/"shadow root">