Selectors Level 4

Editor’s Draft,

More details about this document
This version:
https://drafts.csswg.org/selectors/
Latest published version:
https://www.w3.org/TR/selectors-4/
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:
https://wpt.fyi/results/css/selectors/

Copyright © 2025 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 [email protected].

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:

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

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

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 2
E an element of type E § 5.1 Type (tag name) selector 1
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() 4
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() 4
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() 4
E.warning an E element belonging to the class warning (the document language specifies how class is determined). § 6.6 Class selectors 1
E#myid an E element with ID equal to myid. § 6.7 ID selectors 1
E[foo] an E element with a foo attribute § 6.1 Attribute presence and value selectors 2
E[foo="bar"] an E element whose foo attribute value is exactly equal to bar § 6.1 Attribute presence and value selectors 2
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 4
E[foo="bar" s] an E element whose foo attribute value is identical to bar § 6.3 Case-sensitivity 4
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 2
E[foo^="bar"] an E element whose foo attribute value begins exactly with the string bar § 6.2 Substring matching attribute selectors 3
E[foo$="bar"] an E element whose foo attribute value ends exactly with the string bar § 6.2 Substring matching attribute selectors 3
E[foo*="bar"] an E element whose foo attribute value contains the substring bar § 6.2 Substring matching attribute selectors 3
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 2
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() 4
E:lang(zh, "*-hant") an element of type E tagged as being either in Chinese (any dialect or writing system) or otherwise written with traditional Chinese 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 4
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 1
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 1
E:target an E element being the target of the current URL § 8.3 The Target Pseudo-class: :target 3
E:scope an E element being a scoping root § 8.4 The Reference Element Pseudo-class: :scope 4
E:active an E element that is in an activated state § 9.2 The Activation Pseudo-class: :active 1
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 2
E:focus an E element that has user input focus § 9.3 The Input Focus Pseudo-class: :focus 2
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 4
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 4
E:enabled
E:disabled 		a user interface element E that is enabled or disabled, respectively § 12.1.1 The :enabled and :disabled Pseudo-classes 3
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 3
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 4
E:root an E element, root of the document § 13.1 :root pseudo-class 3
E:empty an E element that has no children (neither elements nor text) except perhaps white space § 13.2 :empty pseudo-class 3
E:nth-child(n [of S]?) an E element, the n-th child of its parent matching S § 13.3.1 :nth-child() pseudo-class 3/4
E:nth-last-child(n [of S]?) an E element, the n-th child of its parent matching S, 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 2
E:last-child an E element, last child of its parent § 13.3.4 :last-child pseudo-class 3
E:only-child an E element, only child of its parent § 13.3.5 :only-child pseudo-class 3
E:nth-of-type(n) an E element, the n-th sibling of its type § 13.4.1 :nth-of-type() pseudo-class 3
E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one § 13.4.2 :nth-last-of-type() pseudo-class 3
E:first-of-type an E element, first sibling of its type § 13.4.3 :first-of-type pseudo-class 3
E:last-of-type an E element, last sibling of its type § 13.4.4 :last-of-type pseudo-class 3
E:only-of-type an E element, only sibling of its type § 13.4.5 :only-of-type pseudo-class 3
E F an F element descendant of an E element § 14.1 Descendant combinator ( ) 1
E > F an F element child of an E element § 14.2 Child combinator (>) 2
E + F an F element immediately preceded by an E element § 14.3 Next-sibling combinator (+) 2
E ~ F an F element preceded by an E element § 14.4 Subsequent-sibling combinator (~) 3

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

Tests