Learning Web Design, 6th Edition

Appendix C. CSS Selectors, Level 4

C

CSS Selectors, Level 4

The following table lists the selectors in the Selectors Level 4 spec (w3.org/TR/selectors-4/, November 2022).

CSS Selectors, Level 5

The W3C is working on the Level 5 spec (drafts.csswg.org/selectors-5/), which is an Editor’s Draft as of this writing. It adds the :local-link functional pseudo-class selector to target links based on URL path structure, the :state() pseudo-class selector for matching custom elements, and a reference combinator, /ref/, for creating complex compound selectors. Although :state() is newly available in modern browsers, the other selector types are considered experimental as of this writing.

Selector	Type of selector	Description
Elemental selectors
*	Universal selector	Matches any element.
E	Type selector	Matches the name of an element.
E:defined	Defined pseudo-class	Matches an element based on whether it is defined in the host language (such as custom elements).
Combinators
E, F	Compound selector	Matches elements E and F.
E F	Descendant combinator	Matches element F only if it is a descendant of element E.
E > F	Child combinator	Matches any element F that is a child of element E.
E + F	Next-sibling combinator	Matches any element F that immediately follows any element E, where E and F share the same parent.
E ~ F	Subsequent-sibling combinator	Matches any element F that is preceded by E, where ...