-
-
Notifications
You must be signed in to change notification settings - Fork 52
CSS supported selectors
This page describes current master (2.3.0-prerelease). Implemented syntax and observable behavior are distinct: some states depend on browser capabilities, and the engine has known conformance gaps. See Features and compliance and the WPT coverage audit.
| Forms | Meaning and notes |
|---|---|
*, E, #id, .class, E.class
|
Universal, type, ID, class, and compound selectors. Escaped identifiers are supported. |
E, F |
Selector lists; selection returns unique elements in document order. |
E F, E > F, E + F, E ~ F
|
Descendant, child, adjacent sibling, and subsequent sibling relationships. |
[attr], [attr="value"]
|
Attribute presence and equality. |
[attr^="value"], [attr$="value"], [attr*="value"]
|
Prefix, suffix, and substring comparisons. |
[attr~="word"], [attr|="en"]
|
CSS-whitespace token and exact-or-hyphen-prefix comparisons. |
[attr="value" i] |
Explicit case-insensitive matching; the s modifier forces case-sensitive matching. |
| Namespace-qualified type and attribute forms | Namespace handling includes wildcard and empty namespace type forms; undeclared prefixes throw. |
Attribute case behavior also depends on the attribute and document type. Empty token values and missing attributes do not become matches merely through string conversion.
| Forms | Notes |
|---|---|
:root, :scope, :empty
|
Document root, query scope, and empty-element tests. |
:first-child, :last-child, :only-child
|
Child position. |
:first-of-type, :last-of-type, :only-of-type
|
Position among siblings of the same type. |
:nth-child(An+B), :nth-last-child(An+B)
|
Integer, odd, even, and formula forms. |
:nth-of-type(An+B), :nth-last-of-type(An+B)
|
Formula forms within a sibling type. |
:heading and :heading(1, 2, ...) implement the Selectors Level 5 heading forms for HTML heading elements, including prefixed HTML local names. Level lists accept signed integers; values outside 1–6 do not match HTML headings.
The of <selector-list> argument to :nth-child() and :nth-last-child() is not implemented.
| Forms | Notes |
|---|---|
:is(...), :where(...)
|
Match alternatives. Forgiving-list handling is enabled by default; invalid items can be discarded individually. |
:not(...) |
Negation, including lists and complex selectors. |
:has(...) |
Relative selector arguments anchored to the subject, including child and sibling relationships. |
:matches(...) |
Compatibility alias; prefer :is(). |
:where() has zero specificity in CSS, although selection itself returns elements rather than specificity values. The optional jsdom adapter uses css-tree for stylesheet integration. Nested :has() and pseudo-elements inside :has() are rejected. Invalid alternatives inside forgiving :is() and :where() lists are discarded individually, with Chromium agreement coverage.
| Forms | Notes |
|---|---|
:link, :any-link
|
Link elements with href; :any-link is not restricted to unvisited links. |
:visited |
Recognized, but matching depends on the nonstandard observable visited property. Browser history is not exposed through this engine. |
:target |
The current document's URL-fragment target. |
:defined |
Built-in and defined custom elements, using native state or the custom-element registry when available. |
:lang(en), :dir(ltr), :dir(rtl)
|
Language and direction tests. Extended language-range/list syntax is not fully implemented. |
:local-link is not implemented.
| Forms | Notes |
|---|---|
:hover |
Native state or lazily installed hover tracking. |
:active, :focus, :focus-within
|
Observable document focus/action state; behavior depends on the DOM host. |
:focus-visible |
Currently uses the focus fallback; it does not reproduce browser modality heuristics. |
:enabled, :disabled
|
Includes disabled fieldsets and first-legend exceptions. |
:read-only, :read-write
|
Editable state for controls and contenteditable elements. |
:checked, :indeterminate, :default
|
Control state exposed by the host. |
:required, :optional
|
Whether supported form controls require a value. |
:valid, :invalid, :in-range, :out-of-range
|
Uses host validation state; the engine does not supply a validation implementation. |
:placeholder-shown |
Uses placeholder presence, supported input type, and empty value; focus alone does not hide a placeholder. |
:autofill, :-webkit-autofill
|
Requires native autofill state. |
| Forms | Notes |
|---|---|
:open, :closed
|
Observable details/dialog open state, plus native state where available. |
:modal |
Native modal state or fullscreen. An open dialog alone does not establish modality. |
:fullscreen, :picture-in-picture
|
Native state or the host's corresponding element/state properties. |
:popover-open, :popover
|
Native showing state for a popover-capable element; the attribute alone is insufficient. :popover is retained as an alias. |
:playing, :paused, :seeking, :muted, :buffering
|
Native state, with observable HTML media-property fallbacks. |
:stalled, :volume-locked
|
Native state required; otherwise match nothing. |
:current, :past, :future, :current(...)
|
Host timeline required; otherwise match nothing. Functional :current() validates a nonempty list of compound selectors. |
These include draft resource/timeline features beyond the commonly used Selectors Level 4 syntax. See media and timeline behavior for exact fallback contracts.
Pseudo-elements are not DOM elements returned by ordinary queries. Recognized pseudo-element forms do not create or return generated browser content.
The column combinator (||), :host, :host-context(), :state(), the explicit attribute s modifier, and :nth-child(... of ...) are not implemented. A ShadowRoot can be a query context without enabling shadow-specific pseudo-classes or crossing shadow boundaries.
Extensions can register selector patterns, operators, and combinators through the API. Check the installed version and test required behavior in the intended DOM host.