Selectors Level 4
Selectors Level 4
Editor’s Draft
22 April 2026
More details about this document
This version:
Latest published version:
Previous Versions:
Feedback:
CSSWG Issues Repository
Inline In Spec
Editors:
Elika J. Etemad / fantasai
Apple
Tab Atkins Jr.
Google
Former Editors:
Tantek Çelik
Daniel Glazman
Ian Hickson
Peter Linss
John Williams
Suggest an Edit for this Spec:
GitHub Editor
Test Suite:
World Wide Web Consortium
W3C
liability
trademark
and
permissive document license
rules apply.
Abstract
Selectors
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
CSS
(Cascading Style Sheets), which uses Selectors to bind style properties to elements in the document.
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.
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 is a public copy of the editors’ draft.
It is provided for discussion only and may change at any moment.
Its publication here does not imply endorsement of its contents by W3C.
Don’t cite this document other than as work in progress.
Please send feedback
by
filing issues in GitHub
(preferred),
including the spec code “selectors” in the title, like this:
“[selectors]
…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
18 August 2025 W3C Process Document
The following features are at-risk, and may be dropped during the CR period:
the column combinator
user action pseudo-classes
applying to non-
tree-abiding pseudo-elements
“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 not normative.
Tests
This section is not normative, it does not need tests.
selector
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:
directly on an element to test whether it matches some criteria,
such as in the
element.matches()
function defined in
[DOM]
applied to an entire tree of elements
to filter it into a set of elements that match the criteria,
such as in the
document.querySelectorAll()
function defined in
[DOM]
or the selector of a CSS style rule.
used "in reverse" to generate markup that would match a given selector,
such as in
HAML
or
Emmet
Selectors Levels 1, 2, and 3 are defined as the subsets of selector
functionality defined in the
CSS1
CSS2.1
, and
Selectors Level 3
specifications, respectively. This module defines Selectors Level 4.
1.1.
Module Interactions
Tests
Tests not needed for this section.
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.
2.
Selectors Overview
This section is non-normative, as it merely summarizes the
following sections.
Tests
This section is not normative, it does not need tests.
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:
Pattern
Represents
Section
Level
any element
§ 5.2 Universal selector
an element of type E
§ 5.1 Type (tag name) selector
E:not(
s1
s2
, …)
an E element that does not match either
compound selector
s1
or
compound selector
s2
§ 4.3 The Negation (Matches-None) Pseudo-class: :not()
3/4
E:is(
s1
s2
, …)
an E element that matches
compound selector
s1
and/or
compound selector
s2
§ 4.2 The Matches-Any Pseudo-class: :is()
E:where(
s1
s2
, …)
an E element that matches
compound selector
s1
and/or
compound selector
s2
but contributes no specificity.
§ 4.4 The Specificity-adjustment Pseudo-class: :where()
E:has(
rs1
rs2
, …)
an E element,
if there exists an element that matches
either of the
relative selectors
rs1
or
rs2
when evaluated with E as the
anchor elements
§ 4.5 The Relational Pseudo-class: :has()
E.warning
an E element belonging to the class
warning
(the document language specifies how class is determined).
§ 6.6 Class selectors
E#myid
an E element with ID equal to
myid
§ 6.7 ID selectors
E[foo]
an E element with a
foo
attribute
§ 6.1 Attribute presence and value selectors
E[foo="bar"]
an E element whose
foo
attribute value is
exactly equal to
bar
§ 6.1 Attribute presence and value selectors
E[foo="bar" i]
an E element whose
foo
attribute value is
exactly equal to any (ASCII-range) case-permutation of
bar
§ 6.3 Case-sensitivity
E[foo="bar" s]
an E element whose
foo
attribute value is
identical to
bar
§ 6.3 Case-sensitivity
E[foo~="bar"]
an E element whose
foo
attribute value is
a list of whitespace-separated values, one of which is
exactly equal to
bar
§ 6.1 Attribute presence and value selectors
E[foo^="bar"]
an E element whose
foo
attribute value
begins exactly with the string
bar
§ 6.2 Substring matching attribute selectors
E[foo$="bar"]
an E element whose
foo
attribute value
ends exactly with the string
bar
§ 6.2 Substring matching attribute selectors
E[foo*="bar"]
an E element whose
foo
attribute value
contains the substring
bar
§ 6.2 Substring matching attribute selectors
E[foo|="en"]
an E element whose
foo
attribute value is
a hyphen-separated list of values beginning with
en
§ 6.1 Attribute presence and value selectors
E:dir(ltr)
an element of type E with left-to-right directionality
(the document language specifies how directionality is determined)
§ 7.1 The Directionality Pseudo-class: :dir()
E:lang(sr, "*-Cyrl")
an element of type E tagged as being in Serbian,
(which typically uses Cyrillic, but can be written with Latin characters)
but also anything written with Cyrillic characters
§ 7.2 The Language Pseudo-class: :lang()
2/4
E:any-link
an E element being the source anchor of a hyperlink
§ 8.1 The Hyperlink Pseudo-class: :any-link
E:link
an E element being the source anchor of a hyperlink
of which the target is not yet visited
§ 8.2 The Link History Pseudo-classes: :link and :visited
E:visited
an E element being the source anchor of a hyperlink
of which the target is already visited
§ 8.2 The Link History Pseudo-classes: :link and :visited
E:target
an E element being the target of the current URL
§ 8.3 The Target Pseudo-class: :target
E:scope
an E element being a
scoping root
§ 8.4 The Reference Element Pseudo-class: :scope
E:active
an E element that is in an activated state
§ 9.2 The Activation Pseudo-class: :active
E:hover
an E element that is under the cursor,
or that has a descendant under the cursor
§ 9.1 The Pointer Hover Pseudo-class: :hover
E:focus
an E element that has user input focus
§ 9.3 The Input Focus Pseudo-class: :focus
E:focus-within
an E element that has user input focus or contains an element that has input focus.
§ 9.5 The Focus Container Pseudo-class: :focus-within
E:focus-visible
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
§ 9.4 The Focus-Indicated Pseudo-class: :focus-visible
E:enabled
E:disabled
a user interface element E that is enabled or disabled, respectively
§ 12.1.1 The :enabled and :disabled Pseudo-classes
E:read-write
E:read-only
a user interface element E that is user alterable, or not
§ 12.1.2 The Mutability Pseudo-classes: :read-only and :read-write
3-UI/4
E:placeholder-shown
an input control currently showing placeholder text
§ 12.1.3 The Placeholder-shown Pseudo-class: :placeholder-shown
3-UI/4
E:default
a user interface element E that is the default item in a group of related choices
§ 12.1.5 The Default-option Pseudo-class: :default
3-UI/4
E:checked
E:unchecked
E:indeterminate
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)
§ 12.2 Input Value States
E:valid
E:invalid
a user-input element E that meets, or doesn’t, its data validity semantics
§ 12.3.1 The Validity Pseudo-classes: :valid and :invalid
3-UI/4
E:in-range
E:out-of-range
a user-input element E whose value is in-range/out-of-range
§ 12.3.2 The Range Pseudo-classes: :in-range and :out-of-range
3-UI/4
E:required
E:optional
a user-input element E that requires/does not require input
§ 12.3.3 The Optionality Pseudo-classes: :required and :optional
3-UI/4
E:user-invalid
a user-altered user-input element E with incorrect input (invalid, out-of-range, omitted-but-required)
§ 12.3.4 The User-interaction Pseudo-classes: :user-valid and :user-invalid
E:root
an E element, root of the document
§ 13.1 :root pseudo-class
E:empty
an E element that has no children (neither elements nor text) except perhaps white space
§ 13.2 :empty pseudo-class
E:nth-child(
[of
]?)
an E element, the
-th child of its parent matching
§ 13.3.1 :nth-child() pseudo-class
3/4
E:nth-last-child(
[of
]?)
an E element, the
-th child of its parent matching
counting from the last one
§ 13.3.2 :nth-last-child() pseudo-class
3/4
E:first-child
an E element, first child of its parent
§ 13.3.3 :first-child pseudo-class
E:last-child
an E element, last child of its parent
§ 13.3.4 :last-child pseudo-class
E:only-child
an E element, only child of its parent
§ 13.3.5 :only-child pseudo-class
E:nth-of-type(
an E element, the
-th sibling of its type
§ 13.4.1 :nth-of-type() pseudo-class
E:nth-last-of-type(
an E element, the
-th sibling of its type,
counting from the last one
§ 13.4.2 :nth-last-of-type() pseudo-class
E:first-of-type
an E element, first sibling of its type
§ 13.4.3 :first-of-type pseudo-class
E:last-of-type
an E element, last sibling of its type
§ 13.4.4 :last-of-type pseudo-class
E:only-of-type
an E element, only sibling of its type
§ 13.4.5 :only-of-type pseudo-class
E F
an F element descendant of an E element
§ 14.1 Descendant combinator ( )
E > F
an F element child of an E element
§ 14.2 Child combinator (>)
E + F
an F element immediately preceded by an E element
§ 14.3 Next-sibling combinator (+)
E ~ F
an F element preceded by an E element
§ 14.4 Subsequent-sibling combinator (~)
Note:
Some Level 4 selectors (noted above as "3-UI") were introduced in
[CSS3UI]
Tests
css3-modsel-1.xml (visual test)
(source)
css3-modsel-10.xml (visual test)
(source)
css3-modsel-100.xml (visual test)
(source)
css3-modsel-100b.xml (visual test)
(source)
css3-modsel-101.xml
(live test)
(source)
css3-modsel-101b.xml
(live test)
(source)
css3-modsel-102.xml
(live test)
(source)
css3-modsel-102b.xml (visual test)
(source)
css3-modsel-103.xml
(live test)
(source)
css3-modsel-103b.xml
(live test)
(source)
css3-modsel-104.xml (visual test)
(source)
css3-modsel-104b.xml (visual test)
(source)
css3-modsel-105.xml
(live test)
(source)
css3-modsel-105b.xml
(live test)
(source)
css3-modsel-106.xml
(live test)
(source)
css3-modsel-106b.xml
(live test)
(source)
css3-modsel-107.xml (visual test)
(source)
css3-modsel-107b.xml (visual test)
(source)
css3-modsel-108.xml
(live test)
(source)
css3-modsel-108b.xml
(live test)
(source)
css3-modsel-109.xml
(live test)
(source)
css3-modsel-109b.xml
(live test)
(source)
css3-modsel-11.xml (visual test)
(source)
css3-modsel-110.xml
(live test)
(source)
css3-modsel-110b.xml
(live test)
(source)
css3-modsel-111.xml (visual test)
(source)
css3-modsel-111b.xml (visual test)
(source)
css3-modsel-112.xml
(live test)
(source)
css3-modsel-112b.xml
(live test)
(source)
css3-modsel-113.xml (visual test)
(source)
css3-modsel-113b.xml (visual test)
(source)
css3-modsel-114.xml (visual test)
(source)
css3-modsel-114b.xml (visual test)
(source)
css3-modsel-115.xml
(live test)
(source)
css3-modsel-115b.xml
(live test)
(source)
css3-modsel-116.xml
(live test)
(source)
css3-modsel-116b.xml
(live test)
(source)
css3-modsel-117.xml
(live test)
(source)
css3-modsel-117b.xml
(live test)
(source)
css3-modsel-118.xml (visual test)
(source)
css3-modsel-119.xml (visual test)
(source)
css3-modsel-120.xml (visual test)
(source)
css3-modsel-121.xml (visual test)
(source)
css3-modsel-122.xml
(live test)
(source)
css3-modsel-123.xml (visual test)
(source)
css3-modsel-123b.xml (visual test)
(source)
css3-modsel-124.xml (visual test)
(source)
css3-modsel-124b.xml (visual test)
(source)
css3-modsel-125.xml
(live test)
(source)
css3-modsel-125b.xml
(live test)
(source)
css3-modsel-126.xml
(live test)
(source)
css3-modsel-126b.xml
(live test)
(source)
css3-modsel-127.xml
(live test)
(source)
css3-modsel-127b.xml
(live test)
(source)
css3-modsel-128.xml
(live test)
(source)
css3-modsel-128b.xml
(live test)
(source)
css3-modsel-129.xml
(live test)
(source)
css3-modsel-129b.xml
(live test)
(source)
css3-modsel-13.xml (visual test)
(source)
css3-modsel-130.xml (visual test)
(source)
css3-modsel-130b.xml (visual test)
(source)
css3-modsel-131.xml (visual test)
(source)
css3-modsel-131b.xml (visual test)
(source)
css3-modsel-132.xml (visual test)
(source)
css3-modsel-132b.xml (visual test)
(source)
css3-modsel-133.xml (visual test)
(source)
css3-modsel-133b.xml (visual test)
(source)
css3-modsel-134.xml
(live test)
(source)
css3-modsel-134b.xml
(live test)
(source)
css3-modsel-135.xml
(live test)
(source)
css3-modsel-135b.xml
(live test)
(source)
css3-modsel-136.xml
(live test)
(source)
css3-modsel-136b.xml
(live test)
(source)
css3-modsel-137.xml (visual test)
(source)
css3-modsel-137b.xml (visual test)
(source)
css3-modsel-138.xml (visual test)
(source)
css3-modsel-138b.xml (visual test)
(source)
css3-modsel-139.xml (visual test)
(source)
css3-modsel-139b.xml (visual test)
(source)
css3-modsel-14.xml (visual test)
(source)
css3-modsel-140.xml (visual test)
(source)
css3-modsel-140b.xml (visual test)
(source)
css3-modsel-141.xml
(live test)
(source)
css3-modsel-141b.xml
(live test)
(source)
css3-modsel-142.xml
(live test)
(source)
css3-modsel-142b.xml
(live test)
(source)
css3-modsel-143.xml
(live test)
(source)
css3-modsel-143b.xml
(live test)
(source)
css3-modsel-144.xml (visual test)
(source)
css3-modsel-145a.xml (visual test)
(source)
css3-modsel-145b.xml (visual test)
(source)
css3-modsel-146a.xml (visual test)
(source)
css3-modsel-146b.xml (visual test)
(source)
css3-modsel-147a.xml (visual test)
(source)
css3-modsel-147b.xml (visual test)
(source)
css3-modsel-148.xml
(live test)
(source)
css3-modsel-149.xml
(live test)
(source)
css3-modsel-149b.xml
(live test)
(source)
css3-modsel-14b.xml
(live test)
(source)
css3-modsel-14c.xml (visual test)
(source)
css3-modsel-14d.xml (visual test)
(source)
css3-modsel-14e.xml (visual test)
(source)
css3-modsel-15.xml (visual test)
(source)
css3-modsel-150.xml (visual test)
(source)
css3-modsel-151.xml
(live test)
(source)
css3-modsel-152.xml
(live test)
(source)
css3-modsel-153.xml (visual test)
(source)
css3-modsel-154.xml
(live test)
(source)
css3-modsel-155.xml
(live test)
(source)
css3-modsel-155a.xml
(live test)
(source)
css3-modsel-155b.xml
(live test)
(source)
css3-modsel-155c.xml
(live test)
(source)
css3-modsel-155d.xml
(live test)
(source)
css3-modsel-156.xml
(live test)
(source)
css3-modsel-156b.xml
(live test)
(source)
css3-modsel-156c.xml
(live test)
(source)
css3-modsel-157.xml
(live test)
(source)
css3-modsel-158.xml
(live test)
(source)
css3-modsel-159.xml (manual test)
(source)
css3-modsel-15b.xml
(live test)
(source)
css3-modsel-16.xml (manual test)
(source)
css3-modsel-160.xml
(live test)
(source)
css3-modsel-161.xml (manual test)
(source)
css3-modsel-166.xml (visual test)
(source)
css3-modsel-166a.xml (visual test)
(source)
css3-modsel-167.xml (visual test)
(source)
css3-modsel-167a.xml (visual test)
(source)
css3-modsel-168.xml
(live test)
(source)
css3-modsel-168a.xml
(live test)
(source)
css3-modsel-169.xml
(live test)
(source)
css3-modsel-169a.xml
(live test)
(source)
css3-modsel-17.xml (manual test)
(source)
css3-modsel-170.xml
(live test)
(source)
css3-modsel-170a.xml
(live test)
(source)
css3-modsel-170b.xml
(live test)
(source)
css3-modsel-170c.xml
(live test)
(source)
css3-modsel-170d.xml
(live test)
(source)
css3-modsel-171.xml (visual test)
(source)
css3-modsel-172a.xml
(live test)
(source)
css3-modsel-172b.xml
(live test)
(source)
css3-modsel-173a.xml
(live test)
(source)
css3-modsel-173b.xml
(live test)
(source)
css3-modsel-174a.xml (visual test)
(source)
css3-modsel-174b.xml (visual test)
(source)
css3-modsel-175a.xml
(live test)
(source)
css3-modsel-175b.xml
(live test)
(source)
css3-modsel-175c.xml
(live test)
(source)
css3-modsel-176.xml
(live test)
(source)
css3-modsel-177a.xml (manual test)
(source)
css3-modsel-177b.xml
(live test)
(source)
css3-modsel-178.xml
(live test)
(source)
css3-modsel-179.xml
(live test)
(source)
css3-modsel-179a.xml (visual test)
(source)
css3-modsel-18.xml (manual test)
(source)
css3-modsel-180a.xml (visual test)
(source)
css3-modsel-181.xml (visual test)
(source)
css3-modsel-182.xml (visual test)
(source)
css3-modsel-183.xml (visual test)
(source)
css3-modsel-184a.xml
(live test)
(source)
css3-modsel-184b.xml
(live test)
(source)
css3-modsel-184c.xml
(live test)
(source)
css3-modsel-184d.xml
(live test)
(source)
css3-modsel-184e.xml
(live test)
(source)
css3-modsel-184f.xml
(live test)
(source)
css3-modsel-18a.xml (manual test)
(source)
css3-modsel-18b.xml (manual test)
(source)
css3-modsel-18c.xml (manual test)
(source)
css3-modsel-19.xml (manual test)
(source)
css3-modsel-19b.xml (manual test)
(source)
css3-modsel-2.xml (visual test)
(source)
css3-modsel-20.xml (manual test)
(source)
css3-modsel-21.xml (manual test)
(source)
css3-modsel-21b.xml (visual test)
(source)
css3-modsel-21c.xml (visual test)
(source)
css3-modsel-22.xml (visual test)
(source)
css3-modsel-25.xml (visual test)
(source)
css3-modsel-27.xml (visual test)
(source)
css3-modsel-27a.xml (visual test)
(source)
css3-modsel-27b.xml (visual test)
(source)
css3-modsel-28.xml (visual test)
(source)
css3-modsel-28b.xml (visual test)
(source)
css3-modsel-29.xml (visual test)
(source)
css3-modsel-29b.xml (visual test)
(source)
css3-modsel-3.xml (visual test)
(source)
css3-modsel-30.xml (visual test)
(source)
css3-modsel-31.xml (visual test)
(source)
css3-modsel-32.xml (visual test)
(source)
css3-modsel-33.xml (visual test)
(source)
css3-modsel-34.xml (visual test)
(source)
css3-modsel-35.xml (visual test)
(source)
css3-modsel-36.xml (visual test)
(source)
css3-modsel-37.xml (visual test)
(source)
css3-modsel-38.xml (visual test)
(source)
css3-modsel-39.xml (visual test)
(source)
css3-modsel-39a.xml (visual test)
(source)
css3-modsel-39b.xml (visual test)
(source)
css3-modsel-39c.xml (visual test)
(source)
css3-modsel-3a.xml (visual test)
(source)
css3-modsel-4.xml (visual test)
(source)
css3-modsel-41.xml (visual test)
(source)
css3-modsel-41a.xml (visual test)
(source)
css3-modsel-42.xml (visual test)
(source)
css3-modsel-42a.xml (visual test)
(source)
css3-modsel-43.xml (visual test)
(source)
css3-modsel-43b.xml (visual test)
(source)
css3-modsel-44.xml (visual test)
(source)
css3-modsel-44b.xml (visual test)
(source)
css3-modsel-44c.xml (visual test)
(source)
css3-modsel-44d.xml (visual test)
(source)
css3-modsel-45.xml (visual test)
(source)
css3-modsel-45b.xml (visual test)
(source)
css3-modsel-45c.xml (visual test)
(source)
css3-modsel-46.xml (visual test)
(source)
css3-modsel-46b.xml (visual test)
(source)
css3-modsel-47.xml (visual test)
(source)
css3-modsel-48.xml
(live test)
(source)
css3-modsel-49.xml
(live test)
(source)
css3-modsel-5.xml (visual test)
(source)
css3-modsel-50.xml (visual test)
(source)
css3-modsel-51.xml (visual test)
(source)
css3-modsel-52.xml (visual test)
(source)
css3-modsel-53.xml (visual test)
(source)
css3-modsel-54.xml
(live test)
(source)
css3-modsel-55.xml
(live test)
(source)
css3-modsel-56.xml
(live test)
(source)
css3-modsel-57.xml (visual test)
(source)
css3-modsel-57b.xml (visual test)
(source)
css3-modsel-59.xml
(live test)
(source)
css3-modsel-6.xml (visual test)
(source)
css3-modsel-60.xml
(live test)
(source)
css3-modsel-61.xml (manual test)
(source)
css3-modsel-62.xml (manual test)
(source)
css3-modsel-63.xml (manual test)
(source)
css3-modsel-64.xml (manual test)
(source)
css3-modsel-65.xml (manual test)
(source)
css3-modsel-66.xml (manual test)
(source)
css3-modsel-66b.xml (visual test)
(source)
css3-modsel-67.xml (visual test)
(source)
css3-modsel-7.xml (visual test)
(source)
css3-modsel-70.xml (visual test)
(source)
css3-modsel-72.xml (visual test)
(source)
css3-modsel-72b.xml (visual test)
(source)
css3-modsel-73.xml (visual test)
(source)
css3-modsel-73b.xml (visual test)
(source)
css3-modsel-74.xml (visual test)
(source)
css3-modsel-74b.xml (visual test)
(source)
css3-modsel-75.xml (visual test)
(source)
css3-modsel-75b.xml (visual test)
(source)
css3-modsel-76.xml (visual test)
(source)
css3-modsel-76b.xml (visual test)
(source)
css3-modsel-77.xml (visual test)
(source)
css3-modsel-77b.xml (visual test)
(source)
css3-modsel-78.xml (visual test)
(source)
css3-modsel-78b.xml (visual test)
(source)
css3-modsel-79.xml (visual test)
(source)
css3-modsel-7b.xml
(live test)
(source)
css3-modsel-8.xml (visual test)
(source)
css3-modsel-80.xml (visual test)
(source)
css3-modsel-81.xml (visual test)
(source)
css3-modsel-81b.xml (visual test)
(source)
css3-modsel-82.xml (visual test)
(source)
css3-modsel-82b.xml (visual test)
(source)
css3-modsel-83.xml
(live test)
(source)
css3-modsel-86.xml (visual test)
(source)
css3-modsel-87.xml
(live test)
(source)
css3-modsel-87b.xml
(live test)
(source)
css3-modsel-88.xml (visual test)
(source)
css3-modsel-88b.xml (visual test)
(source)
css3-modsel-89.xml (visual test)
(source)
css3-modsel-9.xml (visual test)
(source)
css3-modsel-90.xml
(live test)
(source)
css3-modsel-90b.xml
(live test)
(source)
css3-modsel-91.xml (visual test)
(source)
css3-modsel-92.xml (visual test)
(source)
css3-modsel-93.xml (visual test)
(source)
css3-modsel-94.xml (visual test)
(source)
css3-modsel-94b.xml (visual test)
(source)
css3-modsel-95.xml (visual test)
(source)
css3-modsel-96.xml (visual test)
(source)
css3-modsel-96b.xml (visual test)
(source)
css3-modsel-97.xml (visual test)
(source)
css3-modsel-97b.xml (visual test)
(source)
css3-modsel-98.xml (visual test)
(source)
css3-modsel-98b.xml (visual test)
(source)
css3-modsel-99.xml
(live test)
(source)
css3-modsel-99b.xml
(live test)
(source)
css3-modsel-d1.xml (visual test)
(source)
css3-modsel-d1b.xml (visual test)
(source)
css3-modsel-d2.xml (visual test)
(source)
css3-modsel-d3.xml (visual test)
(source)
css3-modsel-d4.xml (visual test)
(source)
Tests that do not relate to any section
eof-right-after-selector-crash.html
(live test)
(source)
eof-some-after-selector-crash.html
(live test)
(source)
hash-collision.html
(live test)
(source)
invalid-pseudos.html
(live test)
(source)
selector-after-font-family.html
(live test)
(source)
3.
Selector Syntax and Structure
3.1.
Structure and Terminology
selector
represents
a particular pattern of element(s) in a tree structure.
The term
selector
can refer to a
simple selector
compound selector
complex selector
, or
selector list
The
subject of a selector
is
any element that selector is defined to be about;
that is, any element
matching
that
selector
simple selector
is a single condition on an element.
type selector
universal selector
attribute selector
class selector
ID selector
or
pseudo-class
is a
simple selector
(It is represented by

in the selectors
grammar
.)
A given element is said to
match
simple selector
when that
simple selector
as defined in this specification and in accordance with the
document language
accurately describes the element.
compound selector
is a sequence of
simple selectors
that are not separated by a
combinator
and represents a set of simultaneous conditions on a single element.
If it contains a
type selector
or
universal selector
that selector must come first in the sequence.
Only one type selector or universal selector is allowed in the sequence.
(A
compound selector
is represented by

in the selectors
grammar
.)
A given element is said to
match
compound selector
when it matches all
simple selectors
in the
compound selector
Note:
As whitespace represents the
descendant combinator
no whitespace is allowed between the
simple selectors
in a
compound selector
pseudo-compound selector
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
combinators
(A
pseudo-compound selector
is represented by

in the selectors
grammar
.)
pseudo-element
matches
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
.)
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
Note:
pseudo-compound selector
is not
compound selector
and can’t be used in places that expect a
compound selector
only.
Pseudo-compound selectors
act as if they carry a
combinator
with themselves,
expressing their relationship with their
originating element
just as the
combinator
expresses a relationship with a parent element.
combinator
is a condition of relationship between two elements
represented by the
compound selectors
on either side.
Combinators in Selectors Level 4 include:
the
descendant combinator
(white space),
the
child combinator
(U+003E,
),
the
next-sibling combinator
(U+002B,
),
and the
subsequent-sibling combinator
(U+007E,
).
Two given elements are said to
match
combinator
when the condition of relationship between these elements is true.
complex selector
is
a sequence of one or more
compound selectors
and/or
pseudo-compound selectors
with
compound selectors
separated by
combinators
It represents a set of simultaneous conditions
on a set of elements in the particular relationships
described by its
combinators
(Complex selectors are represented by

in the selectors
grammar
.)
A given element or pseudo-element
is said to
match
complex selector
when it matches the final
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).
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
list of simple/compound/complex selectors
is a comma-separated list of
simple
compound
or
complex selectors
This is also called just a
selector list
when the type is either unimportant or specified in the surrounding prose;
if the type is important and unspecified,
it defaults to meaning a
list of complex selectors
(See
§ 4.1 Selector Lists
for additional information on
selector lists
and the various <*-selector-list> productions in the
grammar
for their formal syntax.)
A given element is said to
match
selector list
when it matches any (at least one) of the
selectors
in that
selector list
3.2.
Data Model
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:
The element’s type (also known as its tag name).
The element’s namespace.
An ID.
Classes (named groups) to which it belongs.
Attributes, which are name-value pairs.
Many of the selectors depend on the semantics of the
document language
(i.e. the language and semantics of the document tree)
and/or the semantics of the
host language
(i.e. the language that is using selectors syntax).
For example, the
:lang()
selector depends on the
document language
(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
host language
(e.g. CSS)
to define what a
::first-line
pseudo-element represents
and what it can do.
3.2.1.
Featureless Elements
Tests
featureless-001.html
(live test)
(source)
featureless-002.html
(live test)
(source)
featureless-003.html
(live test)
(source)
featureless-004.html
(live test)
(source)
featureless-005.html
(live test)
(source)
While individual elements may lack any of the above features,
some elements are
featureless
featureless
element does not match
any selector at all
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
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
other
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.
For example, the
shadow host
in a
shadow tree
is
featureless
and can’t be matched by
any
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
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
intentionally
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
the rest
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.
3.3.
Scoped Selectors
Some host applications may choose to
scope
selectors
to a particular subtree or fragment of the document,
The root of the scoping subtree is called the
scoping root
When a selector is
scoped
it matches an element only if the element is a descendant of the
scoping root
(The rest of the selector can match unrestricted;
it’s only the final matched elements that must be within the scope.)
For example,
the
querySelector()
method defined in
[DOM]
allows the author to evaluate a
scoped
selector
relative to the element it’s called on.
A call like
widget
querySelector
"a"
will thus only find
elements inside of the
widget
element,
ignoring any other
s that might be scattered throughout the document.
3.4.
Relative Selectors
Certain contexts may accept
relative selectors
which are a shorthand for selectors that represent elements relative to one or more
relative selector anchor elements
Relative selectors begin with a
combinator
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

in the selectors
grammar
and lists of them by

3.5.
Pseudo-classes
Pseudo-classes
are
simple selectors
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.
Pseudo-classes
do not appear in or modify the document source or document tree.
The syntax of a
pseudo-class
consists of a ":" (U+003A COLON)
followed by the name of the
pseudo-class
as a CSS
identifier
and, in the case of a
functional pseudo-class
a pair of parentheses containing its arguments.
For example,
:valid
is a regular pseudo-class,
and
:lang()
is a
functional pseudo-class
Like all CSS keywords,
pseudo-class
names are
ASCII case-insensitive
No
white space
is allowed between the colon and the name of the
pseudo-class
nor, as usual for CSS syntax,
between a
functional pseudo-class
’s name and its opening parenthesis
(which thus form a CSS
function token
).
Also as usual,
white space
is allowed around the arguments inside the parentheses
of a functional pseudo-class
unless otherwise specified.
Like other
simple selectors
pseudo-classes
are allowed in all
compound selectors
contained in a selector,
and must follow the
type selector
or
universal selector
, if present.
Note:
Some
pseudo-classes
are mutually exclusive
(such that a
compound selector
containing them, while valid, will never match anything),
while others can apply simultaneously to the same element.
3.6.
Pseudo-elements
Tests
x-pseudo-element.html
(live test)
(source)
Similar to how certain
pseudo-classes
represent additional state information
not directly present in the document tree,
pseudo-element
represents an
element
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.
For instance, document languages do not offer mechanisms to access
the first letter or first line of an element’s content,
but there exist
pseudo-elements
::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.
Pseudo-elements
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.
Like
pseudo-classes
pseudo-elements
do not appear in or modify the document source or document tree.
Accordingly, they also do not affect the interpretation of
structural pseudo-classes
or other selectors pertaining to their
originating element
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).
3.6.1.
Syntax
The syntax of a
pseudo-element
is "::" (two U+003A COLON characters)
followed by the name of the
pseudo-element
as an
identifier
and, in the case of a
functional pseudo-element
a pair of parentheses containing its arguments.
Pseudo-element
names are
ASCII case-insensitive
No
white space
is allowed between the two colons, or between the colons and the name.
Because
CSS Level 1
and
CSS Level 2
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 & 2 pseudo-elements
::before
::after
::first-line
, and
::first-letter
).
This compatibility notation is not allowed for any other
pseudo-elements
However, as this syntax is deprecated,
authors should use the Level 3+ double-colon syntax for these
pseudo-elements
Pseudo-elements
are
featureless
and so can’t be matched by any other selector.
3.6.2.
Binding to the Document Tree
Pseudo-elements
do not exist independently in the tree:
they are always bound to another element on the page,
called their
originating element
Syntactically, a
pseudo-element
immediately follows
the
compound selector
representing its
originating element
If this
compound selector
is omitted,
it is assumed to be the
universal selector
For example, in the selector
div a::before
the
elements matched by the selector are the
originating elements
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
every
element in the document.
When a
pseudo-element
is encountered in a selector,
the part of the selector before the
pseudo-element
selects the
originating element
for the
pseudo-element
the part of the selector after it, if any, applies to the
pseudo-element
itself.
(See below.)
3.6.3.
Pseudo-classing Pseudo-elements
Certain
pseudo-elements
may be immediately followed
by any combination of certain
pseudo-classes
in which case the
pseudo-element
is represented only when it is in the corresponding state.
This specification allows any
pseudo-element
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.
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.
3.6.4.
Sub-pseudo-elements
Some
pseudo-elements
are able to be the
originating element
of other
pseudo-elements
which are defined as the
sub-pseudo-elements
of this
originating pseudo-element
For example,
when
::before
is given a
list-item
display type
it becomes the
originating pseudo-element
of its
::before::marker
sub-pseudo-element
Where disambiguation is needed,
the term
ultimate originating element
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
).
3.6.5.
Internal Structure
Some
pseudo-elements
are defined to have internal structure.
These
pseudo-elements
may be followed by child/descendant combinators
to express those relationships.
Selectors containing
combinators
after the pseudo-element
are otherwise invalid.
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.
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
pseudo-elements
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
box tree
3.7.
Characters and case sensitivity
Tests
case-insensitive-parent.html
(live test)
(source)
quirks-mode-stylesheet-dynamic-add-001.html
(live test)
(source)
selectors-case-sensitive-001.html
(live test)
(source)
All Selectors syntax is
ASCII case-insensitive
(i.e. [a-z] and [A-Z] are equivalent),
except for the parts
that are not under the control of Selectors:
specifically,
the case-sensitivity of
document language element names,
attribute names,
and attribute values
depends on the document language.
For example,
in HTML, element and attribute names are ASCII case-insensitive
but in XML, they are case-sensitive.
Case sensitivity of namespace prefixes is defined in
[CSS3NAMESPACE]
Case sensitivity of
language ranges
is defined in the
:lang()
section.
White space
in Selectors consists of the
code points SPACE (U+0020), TAB (U+0009), LINE FEED (U+000A),
CARRIAGE RETURN (U+000D), and FORM FEED (U+000C).
Other space-like code points, such as EM SPACE (U+2003) and
IDEOGRAPHIC SPACE (U+3000), are never considered syntactic white space.
Code points in Selectors can be escaped with a backslash
according to the same
escaping rules
as CSS.
[CSS21]
Note that escaping a code point “cancels out”
any special meaning it may have in Selectors.
For example, the selector
#foo>a
contains a combinator,
but
#foo\>a
instead selects an element with the id
foo>a
3.8.
Declaring Namespace Prefixes
Certain selectors support namespace prefixes.
The mechanism by which namespace prefixes are
declared
should be specified by the language that uses Selectors.
If the language does not specify a namespace prefix declaration mechanism,
then no prefixes are declared.
In CSS, namespace prefixes are declared with the
@namespace
rule.
[CSS3NAMESPACE]
3.9.
Invalid Selectors and Error Handling
Tests
selectorText-dynamic-001.html
(live test)
(source)
sheet-going-away-001.html
(live test)
(source)
sheet-going-away-002.html
(live test)
(source)
User agents must observe the rules for handling
invalid selectors
a parsing error in a selector,
e.g. an unrecognized token or a token which is not allowed at the current parsing point
(see overall
§ 16 Grammar
and per-selector syntax definitions),
causes that selector to be invalid.
a simple selector containing an
undeclared namespace prefix
is invalid
a selector containing an invalid simple selector, an invalid combinator
or an invalid token is invalid.
a selector list containing an invalid selector is invalid.
an empty selector, i.e. one that contains no
compound selector
, is invalid.
Note:
Consistent with CSS’s forwards-compatible parsing principle,
UAs
must
treat as
invalid
any pseudo-classes, pseudo-elements, combinators, or other syntactic constructs
for which they have no usable level of support.
See
Partial implementations
An
invalid selector
represents, and therefore matches, nothing.
3.10.
Legacy Aliases
Some selectors have a
legacy selector alias
This is a name which, at parse time, is converted to the standard name
(and thus does not appear anywhere in any object model representing the selector).
4.
Logical Combinations
Tests
is-where-pseudo-containing-hard-pseudo-and-never-matching.html
(live test)
(source)
is-where-pseudo-containing-hard-pseudo.html
(live test)
(source)
Selector logic can be manipulated by
compounding
(logical AND),
selector lists
(logical OR),
and the
logical combination pseudo-classes
:is()
:where()
, and
:not()
The
logical combination pseudo-classes
are allowed anywhere that any other
pseudo-classes
are allowed,
but pass any restrictions to their arguments.
(For example, if only
compound selectors
are allowed,
then only
compound selectors
are valid within an
:is()
.)
Note:
Since inside
:is()
and
:where()
invalid arguments are dropped without invaliding the
pseudo-class
itself,
selector arguments that are invalidated by contextual restrictions
likewise do not invalidate the
:is()
pseudo-class itself.
4.1.
Selector Lists
A comma-separated list of selectors represents the union of all
elements selected by each of the individual selectors in the
selector list
(A comma is U+002C.) For example, in CSS when several selectors share
the same declarations, they may be grouped into a comma-separated
list. White space may appear before and/or after the comma.
CSS example:
In this example, we condense three rules with identical
declarations into one. Thus,
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
is equivalent to:
h1, h2, h3 { font-family: sans-serif }
Warning
: the equivalence is true in this example
because all the selectors are valid selectors. If just one of these
selectors were invalid, the entire
selector list
would be
invalid. This would invalidate the rule for all three heading
elements, whereas in the former case only one of the three individual
heading rules would be invalidated.
Invalid CSS example:
h1 { font-family: sans-serif }
h2..foo { font-family: sans-serif }
h3 { font-family: sans-serif }
is not equivalent to:
h1, h2..foo, h3 { font-family: sans-serif }
because the above selector (
h1, h2..foo, h3
is entirely invalid and the entire style rule is dropped. (When
the selectors are not grouped, only the rule for
h2..foo
is dropped.)
4.2.
The Matches-Any Pseudo-class:
:is()
Tests
is.html
(live test)
(source)
is-default-ns-001.html
(live test)
(source)
is-default-ns-002.html
(live test)
(source)
is-default-ns-003.html
(live test)
(source)
is-default-ns-002.html
(live test)
(source)
is-default-ns-003.html
(live test)
(source)
is-nested.html
(live test)
(source)
is-specificity-shadow.html
(live test)
(source)
is-specificity.html
(live test)
(source)
is-where-basic.html
(live test)
(source)
is-where-error-crash.html
(live test)
(source)
is-where-error-recovery.html
(live test)
(source)
is-where-not.html
(live test)
(source)
is-where-pseudo-classes.html
(live test)
(source)
is-where-pseudo-elements.html
(live test)
(source)
is-where-shadow.html
(live test)
(source)
is-where-visited.html
(live test)
(source)
parse-is-where.html
(live test)
(source)
parse-is.html
(live test)
(source)
query-is.html
(live test)
(source)
The matches-any pseudo-class,
:is()
is a functional pseudo-class taking a

as its sole argument.
If the argument, after parsing, is an empty list,
the pseudo-class is valid but matches nothing.
Otherwise, the pseudo-class matches any element
that matches any of the selectors in the list.
Note:
The specificity of the
:is()
pseudo-class
is replaced by the specificity of its most specific argument.
Thus, a selector written with
:is()
does not necessarily have equivalent specificity
to the equivalent selector written without
:is()
For example, if we have
:is(ul, ol, .list) > [hidden]
and
ul > [hidden], ol > [hidden], .list > [hidden]
[hidden]
child of an
ol
matches the first selector
with a specificity of (0,2,0)
whereas it matches the second selector
with a specificity of (0,1,1).
See
§ 15 Calculating a selector’s specificity
Pseudo-elements cannot be represented by the matches-any pseudo-class;
they are not valid within
:is()
Default namespace declarations do not affect the
compound selector
representing the
subject
of any selector
within a
:is()
pseudo-class,
unless that compound selector contains
an explicit
universal selector
or
type selector
For example, the following selector matches any element that is being
hovered or focused, regardless of its namespace. In particular, it
is not limited to only matching elements in the default namespace
that are being hovered or focused.
*|*:is(:hover, :focus)
The following selector, however, represents only hovered or focused
elements that are in the default namespace, because it uses an explicit
universal selector within the
:is()
notation:
*|*:is(*:hover, *:focus)
As previous drafts of this specification
used the name
:matches()
for this pseudo-class,
UAs may additionally implement this obsolete name
as a
legacy selector alias
for
:is()
if needed for backwards-compatibility.
4.3.
The Negation (Matches-None) Pseudo-class:
:not()
Tests
not-001.html
(live test)
(source)
not-002.html
(live test)
(source)
not-complex.html
(live test)
(source)
not-default-ns-001.html
(live test)
(source)
not-default-ns-002.html
(live test)
(source)
not-default-ns-003.html
(live test)
(source)
not-links.html
(live test)
(source)
not-specificity.html
(live test)
(source)
parse-not.html
(live test)
(source)
query-where.html
(live test)
(source)
The negation pseudo-class,
:not()
is a functional pseudo-class taking a

as an argument.
It represents an element that is not represented by its argument.
Note:
In Selectors Level 3,
only a single
simple selector
was allowed as the argument to
:not()
Note:
The specificity of the
:not()
pseudo-class
is replaced by the specificity of the most specific selector in its argument;
thus it has the exact behavior of
:not(:is(
argument
))
See
§ 15 Calculating a selector’s specificity
Pseudo-elements cannot be represented by the negation pseudo-class;
they are not valid within
:not()
For example, the following selector matches all
button
elements in an HTML document
that are not disabled.
button:not([DISABLED])
The following selector represents all but FOO elements.
*:not(FOO)
The following compound selector represents all HTML elements
except links.
html|*:not(:link):not(:visited)
As with
:is()
default namespace declarations do not affect the
compound selector
representing the
subject
of any selector
within a
:not()
pseudo-class,
unless that compound selector contains
an explicit
universal selector
or
type selector
(See
:is()
for examples.)
Note:
The
:not()
pseudo-class allows useless selectors to be written.
For instance
:not(*|*)
, which represents no element at all,
or
div:not(span)
, which is equivalent to
div
but with a higher specificity.
4.4.
The Specificity-adjustment Pseudo-class:
:where()
Tests
where.html
(live test)
(source)
parse-where.html
(live test)
(source)
pseudo-where-crash.html
(live test)
(source)
The Specificity-adjustment pseudo-class,
:where()
is a functional pseudo-class
with the same syntax and functionality as
:is()
Unlike
:is()
, neither the
:where()
pseudo-class, nor any of its arguments,
contribute to the
specificity
of the selector—​its
specificity
is always zero.
This is useful for introducing filters in a selector
while keeping the associated style declarations easy to override.
Below is a common example where the specificity heuristic fails
to match author expectations:
a:not(:hover) {
text-decoration: none;

nav a {
/* Has no effect */
text-decoration: underline;
However, by using
:where()
the author can explicitly declare their intent:
a:where(:not(:hover)) {
text-decoration: none;

nav a {
/* Works now! */
text-decoration: underline;
Note:
Future levels of Selectors may introduce an additional argument
to explicitly set the specificity of that instance of the pseudo-class.
4.5.
The Relational Pseudo-class:
:has()
Tests
has-argument-with-explicit-scope.html
(live test)
(source)
has-basic.html
(live test)
(source)
has-display-none-checked.html
(live test)
(source)
has-focus-display-change.html
(live test)
(source)
has-matches-to-uninserted-elements.html
(live test)
(source)
has-nth-of-crash.html
(live test)
(source)
has-relative-argument.html
(live test)
(source)
has-sibling-chrome-crash.html
(live test)
(source)
has-specificity.html
(live test)
(source)
has-style-sharing-001.html
(live test)
(source)
has-style-sharing-002.html
(live test)
(source)
has-style-sharing-003.html
(live test)
(source)
has-style-sharing-004.html
(live test)
(source)
has-style-sharing-005.html
(live test)
(source)
has-style-sharing-006.html
(live test)
(source)
has-style-sharing-007.html
(live test)
(source)
has-style-sharing-pseudo-001.html
(live test)
(source)
has-style-sharing-pseudo-002.html
(live test)
(source)
has-style-sharing-pseudo-003.html
(live test)
(source)
has-style-sharing-pseudo-004.html
(live test)
(source)
has-style-sharing-pseudo-005.html
(live test)
(source)
has-style-sharing-pseudo-006.html
(live test)
(source)
has-style-sharing-pseudo-007.html
(live test)
(source)
has-style-sharing-pseudo-008.html
(live test)
(source)
has-visited.html
(live test)
(source)
attribute-or-elemental-selectors-in-has.html
(live test)
(source)
child-indexed-pseudo-classes-in-has.html
(live test)
(source)
has-pseudoclass-only-crash.html
(live test)
(source)
defined-in-has.html
(live test)
(source)
dir-pseudo-class-in-has.html
(live test)
(source)
empty-pseudo-in-has.html
(live test)
(source)
fullscreen-pseudo-class-in-has.html
(live test)
(source)
has-append-first-node.html
(live test)
(source)
has-complexity.html
(live test)
(source)
has-css-nesting-shared.html
(live test)
(source)
has-in-adjacent-position.html
(live test)
(source)
has-in-ancestor-position.html
(live test)
(source)
has-in-parent-position.html
(live test)
(source)
has-in-sibling-position.html
(live test)
(source)
has-invalidation-after-removing-non-first-element.html
(live test)
(source)
has-invalidation-first-in-sibling-chain.html
(live test)
(source)
has-invalidation-for-wiping-an-element.html
(live test)
(source)
has-nested-pseudo-001-crash.html
(live test)
(source)
has-nested-pseudo-002-crash.html
(live test)
(source)
has-nested-pseudo-003-crash.html
(live test)
(source)
has-pseudo-element.html
(live test)
(source)
has-pseudoclass-only.html
(live test)
(source)
has-sibling-insertion-removal.html
(live test)
(source)
has-sibling.html
(live test)
(source)
has-side-effect.html
(live test)
(source)
has-unstyled.html
(live test)
(source)
has-with-is-child-combinator.html
(live test)
(source)
has-with-nesting-parent-containing-complex.html
(live test)
(source)
has-with-nesting-parent-containing-hover.html
(live test)
(source)
has-with-not.html
(live test)
(source)
has-with-nth-child-sibling-remove.html
(live test)
(source)
has-with-nth-child.html
(live test)
(source)
has-with-pseudo-class.html
(live test)
(source)
host-context-pseudo-class-in-has.html
(live test)
(source)
host-has-shadow-tree-element-at-nonsubject-position.html
(live test)
(source)
host-has-shadow-tree-element-at-subject-position.html
(live test)
(source)
host-pseudo-class-in-has.html
(live test)
(source)
input-pseudo-classes-in-has.html
(live test)
(source)
input-in-range-in-has-with-readonly.html
(live test)
(source)
is-pseudo-containing-complex-in-has.html
(live test)
(source)
is-pseudo-containing-sibling-relationship-in-has.html
(live test)
(source)
lang-pseudo-class-in-has-document-element.html
(live test)
(source)
lang-pseudo-class-in-has-multiple-document-elements.html
(live test)
(source)
lang-pseudo-class-in-has-xhtml.xhtml
(live test)
(source)
lang-pseudo-class-in-has.html
(live test)
(source)
link-pseudo-class-in-has.html
(live test)
(source)
link-pseudo-in-has.html
(live test)
(source)
location-pseudo-classes-in-has.html
(live test)
(source)
media-loading-pseudo-classes-in-has.sub.html
(live test)
(source)
media-pseudo-classes-in-has.html
(live test)
(source)
modal-pseudo-class-in-has.html
(live test)
(source)
negated-has-in-nonsubject-position.html
(live test)
(source)
not-pseudo-containing-complex-in-has.html
(live test)
(source)
not-pseudo-containing-sibling-relationship-in-has.html
(live test)
(source)
open-pseudo-class-in-has.html
(live test)
(source)
state-in-has.html
(live test)
(source)
subject-has-invalidation-with-display-none-anchor-element.html
(live test)
(source)
target-pseudo-in-has.html
(live test)
(source)
typed-child-indexed-pseudo-classes-in-has.html
(live test)
(source)
user-action-pseudo-classes-in-has.html
(live test)
(source)
parse-has-disallow-nesting-has-inside-has.html
(live test)
(source)
parse-has-forgiving-selector.html
(live test)
(source)
parse-has.html
(live test)
(source)
The relational pseudo-class,
:has()
is a functional pseudo-class taking a

as an argument.
It represents an element if any of the
relative selectors
would match at least one element
when
anchored against
this element.
The
:has()
pseudo-class cannot be nested;
:has()
is not valid within
:has()
Also, unless explicitly defined as a
:has-allowed pseudo-element
pseudo-elements
are not valid selectors within
:has()
(This specification does not define any
:has-allowed pseudo-elements
but other specifications may do so.)
Note:
Pseudo-elements are generally excluded from
:has()
because
many of them exist conditionally, based on the styling of their ancestors,
so allowing these to be queried by
:has()
would introduce cycles.
Note:
Since
:has()
takes a

its arguments are
inherently
complex selectors
(because they start, perhaps implicitly, with a combinator).
This means
:has()
cannot be used in contexts that don’t allow complex selectors;
its arguments will be guaranteed to be invalid.
For example, the following selector matches only

elements that contain an

child:
a:has(> img)
The following selector matches a

function a(x) = 12x/13.5