<pre class='metadata'>

Title: Selectors Level 4

Group: CSSWG

Shortname: selectors

Level: 4

Status: ED

Work Status: Refining

ED: https://drafts.csswg.org/selectors/

TR: https://www.w3.org/TR/selectors-4/

Previous Version: https://www.w3.org/TR/2022/WD-selectors-4-20220507/

Previous Version: https://www.w3.org/TR/2018/WD-selectors-4-20181121/

Previous Version: https://www.w3.org/TR/2018/WD-selectors-4-20180202/

Previous Version: https://www.w3.org/TR/2018/WD-selectors-4-20180201/

Previous Version: https://www.w3.org/TR/2013/WD-selectors4-20130502/

Previous Version: https://www.w3.org/TR/2012/WD-selectors4-20120823/

Previous Version: https://www.w3.org/TR/2011/WD-selectors4-20110929/

Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400

Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199

Former Editor: Tantek Çelik, http://www.tantek.com

Former Editor: Daniel Glazman

Former Editor: Ian Hickson

Former Editor: Peter Linss

Former Editor: John Williams

Abstract: <a>Selectors</a> are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in a document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code. They are a core component of <abbr title="Cascading Style Sheets">CSS</abbr> (Cascading Style Sheets), which uses Selectors to bind style properties to elements in the document.

Abstract: Selectors Level 4 describes the selectors that already exist in [[!SELECT]], and further introduces new selectors for CSS and other languages that may need them.

At Risk: the column combinator

At Risk: [=user action pseudo-classes=] applying to non-[=tree-abiding pseudo-elements=]

Ignored Terms: function token, Document, DocumentFragment, math, h1, shadow tree, querySelector(), quirks mode, button, a, span, object, p, div, q, area, link, label, input, html, em, li, ol, pre, CSS Value Definition Syntax

Ignored Vars: identifier, i

Ignore MDN Failure: #blank-pseudo

Ignore MDN Failure: #the-column-combinator

Ignore MDN Failure: #the-future-pseudo

Ignore MDN Failure: #the-past-pseudo

Ignore MDN Failure: #the-target-within-pseudo

WPT Path Prefix: css/selectors/

WPT Display: closed

</pre>

<pre class=link-defaults>

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

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

spec:css-display-4; type:property; text:visibility

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

spec:selectors-5; type:selector; text::blank

</pre>

<style>

#selector-examples td:first-child {

white-space: nowrap;

}

</style>

<h2 id="context">

Introduction</h2>

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

<wpt title="This section is not normative, it does not need tests."></wpt>

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.

<h3 id="placement">Module Interactions</h3>

<wpt title="Tests not needed for this section."></wpt>

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.

<h2 id="overview">

Selectors Overview</h2>

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

following sections.</em>

<wpt title="This section is not normative, it does not need tests."></wpt>

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:target</code>

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

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

<td>3

<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: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><br><code>E:unchecked</code><br><code>E:indeterminate</code>

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

(for instance a radio-button or checkbox),

unchecked,

or in an indeterminate state

(neither checked nor unchecked)

<td>[[#input-value-states]]

<td>3

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

</table>

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

<wpt>

old-tests/css3-modsel-1.xml

old-tests/css3-modsel-10.xml

old-tests/css3-modsel-100.xml

old-tests/css3-modsel-100b.xml

old-tests/css3-modsel-101.xml

old-tests/css3-modsel-101b.xml

old-tests/css3-modsel-102.xml

old-tests/css3-modsel-102b.xml

old-tests/css3-modsel-103.xml

old-tests/css3-modsel-103b.xml

old-tests/css3-modsel-104.xml

old-tests/css3-modsel-104b.xml

old-tests/css3-modsel-105.xml

old-tests/css3-modsel-105b.xml

old-tests/css3-modsel-106.xml

old-tests/css3-modsel-106b.xml

old-tests/css3-modsel-107.xml

old-tests/css3-modsel-107b.xml

old-tests/css3-modsel-108.xml

old-tests/css3-modsel-108b.xml

old-tests/css3-modsel-109.xml

old-tests/css3-modsel-109b.xml

old-tests/css3-modsel-11.xml

old-tests/css3-modsel-110.xml

old-tests/css3-modsel-110b.xml

old-tests/css3-modsel-111.xml

old-tests/css3-modsel-111b.xml

old-tests/css3-modsel-112.xml

old-tests/css3-modsel-112b.xml

old-tests/css3-modsel-113.xml

old-tests/css3-modsel-113b.xml

old-tests/css3-modsel-114.xml

old-tests/css3-modsel-114b.xml

old-tests/css3-modsel-115.xml

old-tests/css3-modsel-115b.xml

old-tests/css3-modsel-116.xml

old-tests/css3-modsel-116b.xml

old-tests/css3-modsel-117.xml

old-tests/css3-modsel-117b.xml

old-tests/css3-modsel-118.xml

old-tests/css3-modsel-119.xml

old-tests/css3-modsel-120.xml

old-tests/css3-modsel-121.xml

old-tests/css3-modsel-122.xml

old-tests/css3-modsel-123.xml

old-tests/css3-modsel-123b.xml

old-tests/css3-modsel-124.xml

old-tests/css3-modsel-124b.xml

old-tests/css3-modsel-125.xml

old-tests/css3-modsel-125b.xml

old-tests/css3-modsel-126.xml

old-tests/css3-modsel-126b.xml

old-tests/css3-modsel-127.xml

old-tests/css3-modsel-127b.xml

old-tests/css3-modsel-128.xml

old-tests/css3-modsel-128b.xml

old-tests/css3-modsel-129.xml

old-tests/css3-modsel-129b.xml

old-tests/css3-modsel-13.xml

old-tests/css3-modsel-130.xml

old-tests/css3-modsel-130b.xml

old-tests/css3-modsel-131.xml

old-tests/css3-modsel-131b.xml

old-tests/css3-modsel-132.xml

old-tests/css3-modsel-132b.xml

old-tests/css3-modsel-133.xml

old-tests/css3-modsel-133b.xml

old-tests/css3-modsel-134.xml

old-tests/css3-modsel-134b.xml

old-tests/css3-modsel-135.xml

old-tests/css3-modsel-135b.xml

old-tests/css3-modsel-136.xml

old-tests/css3-modsel-136b.xml

old-tests/css3-modsel-137.xml

old-tests/css3-modsel-137b.xml

old-tests/css3-modsel-138.xml

old-tests/css3-modsel-138b.xml

old-tests/css3-modsel-139.xml

old-tests/css3-modsel-139b.xml

old-tests/css3-modsel-14.xml

old-tests/css3-modsel-140.xml

old-tests/css3-modsel-140b.xml

old-tests/css3-modsel-141.xml

old-tests/css3-modsel-141b.xml

old-tests/css3-modsel-142.xml

old-tests/css3-modsel-142b.xml

old-tests/css3-modsel-143.xml

old-tests/css3-modsel-143b.xml

old-tests/css3-modsel-144.xml

old-tests/css3-modsel-145a.xml

old-tests/css3-modsel-145b.xml

old-tests/css3-modsel-146a.xml

old-tests/css3-modsel-146b.xml

old-tests/css3-modsel-147a.xml

old-tests/css3-modsel-147b.xml

old-tests/css3-modsel-148.xml

old-tests/css3-modsel-149.xml

old-tests/css3-modsel-149b.xml

old-tests/css3-modsel-14b.xml

old-tests/css3-modsel-14c.xml

old-tests/css3-modsel-14d.xml

old-tests/css3-modsel-14e.xml

old-tests/css3-modsel-15.xml

old-tests/css3-modsel-150.xml

old-tests/css3-modsel-151.xml

old-tests/css3-modsel-152.xml

old-tests/css3-modsel-153.xml

old-tests/css3-modsel-154.xml

old-tests/css3-modsel-155.xml

old-tests/css3-modsel-155a.xml

old-tests/css3-modsel-155b.xml

old-tests/css3-modsel-155c.xml

old-tests/css3-modsel-155d.xml

old-tests/css3-modsel-156.xml

old-tests/css3-modsel-156b.xml

old-tests/css3-modsel-156c.xml

old-tests/css3-modsel-157.xml

old-tests/css3-modsel-158.xml

old-tests/css3-modsel-159.xml

old-tests/css3-modsel-15b.xml

old-tests/css3-modsel-16.xml

old-tests/css3-modsel-160.xml

old-tests/css3-modsel-161.xml

old-tests/css3-modsel-166.xml

old-tests/css3-modsel-166a.xml

old-tests/css3-modsel-167.xml

old-tests/css3-modsel-167a.xml

old-tests/css3-modsel-168.xml

old-tests/css3-modsel-168a.xml

old-tests/css3-modsel-169.xml

old-tests/css3-modsel-169a.xml

old-tests/css3-modsel-17.xml

old-tests/css3-modsel-170.xml

old-tests/css3-modsel-170a.xml

old-tests/css3-modsel-170b.xml

old-tests/css3-modsel-170c.xml

old-tests/css3-modsel-170d.xml

old-tests/css3-modsel-171.xml

old-tests/css3-modsel-172a.xml

old-tests/css3-modsel-172b.xml

old-tests/css3-modsel-173a.xml

old-tests/css3-modsel-173b.xml

old-tests/css3-modsel-174a.xml

old-tests/css3-modsel-174b.xml

old-tests/css3-modsel-175a.xml

old-tests/css3-modsel-175b.xml

old-tests/css3-modsel-175c.xml

old-tests/css3-modsel-176.xml

old-tests/css3-modsel-177a.xml

old-tests/css3-modsel-177b.xml

old-tests/css3-modsel-178.xml

old-tests/css3-modsel-179.xml

old-tests/css3-modsel-179a.xml

old-tests/css3-modsel-18.xml

old-tests/css3-modsel-180a.xml

old-tests/css3-modsel-181.xml

old-tests/css3-modsel-182.xml

old-tests/css3-modsel-183.xml

old-tests/css3-modsel-184a.xml

old-tests/css3-modsel-184b.xml

old-tests/css3-modsel-184c.xml

old-tests/css3-modsel-184d.xml

old-tests/css3-modsel-184e.xml

old-tests/css3-modsel-184f.xml

old-tests/css3-modsel-18a.xml

old-tests/css3-modsel-18b.xml

old-tests/css3-modsel-18c.xml

old-tests/css3-modsel-19.xml

old-tests/css3-modsel-19b.xml

old-tests/css3-modsel-2.xml

old-tests/css3-modsel-20.xml

old-tests/css3-modsel-21.xml

old-tests/css3-modsel-21b.xml

old-tests/css3-modsel-21c.xml

old-tests/css3-modsel-22.xml

old-tests/css3-modsel-25.xml

old-tests/css3-modsel-27.xml

old-tests/css3-modsel-27a.xml

old-tests/css3-modsel-27b.xml

old-tests/css3-modsel-28.xml

old-tests/css3-modsel-28b.xml

old-tests/css3-modsel-29.xml

old-tests/css3-modsel-29b.xml

old-tests/css3-modsel-3.xml

old-tests/css3-modsel-30.xml

old-tests/css3-modsel-31.xml

old-tests/css3-modsel-32.xml

old-tests/css3-modsel-33.xml

old-tests/css3-modsel-34.xml

old-tests/css3-modsel-35.xml

old-tests/css3-modsel-36.xml

old-tests/css3-modsel-37.xml

old-tests/css3-modsel-38.xml

old-tests/css3-modsel-39.xml

old-tests/css3-modsel-39a.xml

old-tests/css3-modsel-39b.xml

old-tests/css3-modsel-39c.xml

old-tests/css3-modsel-3a.xml

old-tests/css3-modsel-4.xml

old-tests/css3-modsel-41.xml

old-tests/css3-modsel-41a.xml

old-tests/css3-modsel-42.xml

old-tests/css3-modsel-42a.xml

old-tests/css3-modsel-43.xml

old-tests/css3-modsel-43b.xml

old-tests/css3-modsel-44.xml

old-tests/css3-modsel-44b.xml

old-tests/css3-modsel-44c.xml

old-tests/css3-modsel-44d.xml

old-tests/css3-modsel-45.xml

old-tests/css3-modsel-45b.xml

old-tests/css3-modsel-45c.xml

old-tests/css3-modsel-46.xml

old-tests/css3-modsel-46b.xml

old-tests/css3-modsel-47.xml

old-tests/css3-modsel-48.xml

old-tests/css3-modsel-49.xml

old-tests/css3-modsel-5.xml

old-tests/css3-modsel-50.xml

old-tests/css3-modsel-51.xml

old-tests/css3-modsel-52.xml

old-tests/css3-modsel-53.xml

old-tests/css3-modsel-54.xml

old-tests/css3-modsel-55.xml

old-tests/css3-modsel-56.xml

old-tests/css3-modsel-57.xml

old-tests/css3-modsel-57b.xml

old-tests/css3-modsel-59.xml

old-tests/css3-modsel-6.xml

old-tests/css3-modsel-60.xml

old-tests/css3-modsel-61.xml

old-tests/css3-modsel-62.xml

old-tests/css3-modsel-63.xml

old-tests/css3-modsel-64.xml

old-tests/css3-modsel-65.xml

old-tests/css3-modsel-66.xml

old-tests/css3-modsel-66b.xml

old-tests/css3-modsel-67.xml

old-tests/css3-modsel-7.xml

old-tests/css3-modsel-70.xml

old-tests/css3-modsel-72.xml

old-tests/css3-modsel-72b.xml

old-tests/css3-modsel-73.xml

old-tests/css3-modsel-73b.xml

old-tests/css3-modsel-74.xml

old-tests/css3-modsel-74b.xml

old-tests/css3-modsel-75.xml

old-tests/css3-modsel-75b.xml

old-tests/css3-modsel-76.xml

old-tests/css3-modsel-76b.xml

old-tests/css3-modsel-77.xml

old-tests/css3-modsel-77b.xml

old-tests/css3-modsel-78.xml

old-tests/css3-modsel-78b.xml

old-tests/css3-modsel-79.xml

old-tests/css3-modsel-7b.xml

old-tests/css3-modsel-8.xml

old-tests/css3-modsel-80.xml

old-tests/css3-modsel-81.xml

old-tests/css3-modsel-81b.xml

old-tests/css3-modsel-82.xml

old-tests/css3-modsel-82b.xml

old-tests/css3-modsel-83.xml

old-tests/css3-modsel-86.xml

old-tests/css3-modsel-87.xml

old-tests/css3-modsel-87b.xml

old-tests/css3-modsel-88.xml

old-tests/css3-modsel-88b.xml

old-tests/css3-modsel-89.xml

old-tests/css3-modsel-9.xml

old-tests/css3-modsel-90.xml

old-tests/css3-modsel-90b.xml

old-tests/css3-modsel-91.xml

old-tests/css3-modsel-92.xml

old-tests/css3-modsel-93.xml

old-tests/css3-modsel-94.xml

old-tests/css3-modsel-94b.xml

old-tests/css3-modsel-95.xml

old-tests/css3-modsel-96.xml

old-tests/css3-modsel-96b.xml

old-tests/css3-modsel-97.xml

old-tests/css3-modsel-97b.xml

old-tests/css3-modsel-98.xml

old-tests/css3-modsel-98b.xml

old-tests/css3-modsel-99.xml

old-tests/css3-modsel-99b.xml

old-tests/css3-modsel-d1.xml

old-tests/css3-modsel-d1b.xml

old-tests/css3-modsel-d2.xml

old-tests/css3-modsel-d3.xml

old-tests/css3-modsel-d4.xml

</wpt>

<wpt title="Tests that do not relate to any section">

eof-right-after-selector-crash.html

eof-some-after-selector-crash.html

hash-collision.html

parsing/invalid-pseudos.html

selector-after-font-family.html

</wpt>

<h2 id="syntax">

Selector Syntax and Structure</h2>

<h3 id="structure">

Structure and Terminology</h3>

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

<h3 id='data-model'>

Data Model</h3>

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.

<h4 id=featureless-elements>

Featureless Elements</h4>

<wpt>

featureless-001.html

featureless-002.html

featureless-003.html

featureless-004.html

featureless-005.html

</wpt>

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>