Reference
Combinators and separators
+(Next-sibling combinator)>(Child combinator)~(Subsequent sibling combinator)- " " (Descendant combinator)
|(Namespace separator),(Selector list)
The CSS selectors module also introduces the column combinator (||). Currently, no browsers support this feature.
Selectors
:active:any-link:autofill:buffering:checked:default:defined:dir():disabled:empty:enabled:first-child:first-of-type:focus:focus-visible:focus-within:fullscreen:future:has():hover:in-range:indeterminate:interest-source:interest-target:invalid:is():lang():last-child:last-of-type:link:matches()(obsolete legacy selector alias for:is()):modal:muted:not():nth-child():nth-of-type():nth-last-child():nth-last-of-type():only-child:only-of-type:open:optional:out-of-range:past:paused:picture-in-picture:placeholder-shown:playing:popover-open:read-only:read-write:required:root:scope:seeking:stalled:target:user-invalid:user-valid:valid:visited:volume-locked:where():-webkit-pseudo-classes- Attribute selectors
- Class selector
- ID selectors
- Type selectors
- Universal selectors
The CSS selectors module also introduces the :blank, :current, and :local-link pseudo-classes. Currently, no browsers support these features.
Terms
Guides
- CSS selectors and combinators
-
Overview of the different types of simple selectors and various combinators defined in the CSS selectors and the CSS pseudo modules.
- CSS selector structure
-
Explanation of the structure of CSS selectors and the terminologies introduced in the CSS selectors module, ranging from "simple selector" to "forgiving relative selector list".
- Pseudo classes
-
Lists the pseudo-classes, selectors that allow the selection of elements based on state information that is not contained in the document tree, defined in the various CSS modules and HTML.
- Using the
:targetpseudo-class in selectors -
Learn how to use the
:targetpseudo-class to style the target element a URL's fragment identifier. - Privacy and the
:visitedselector -
Explores the style limitations set on the
:visitedclass for user privacy. - CSS building blocks: CSS selectors
-
Introduction to basic CSS selectors, including tutorials on Type, class, and ID selectors, Attribute selectors, Pseudo-classes and pseudo-elements, and Combinators.
- Learn: UI pseudo-classes
-
Learn the different UI pseudo-classes available for styling forms in different states.
- Selection and traversal on the DOM tree
-
The selectors API enables using selectors in JavaScript to retrieve element nodes from the DOM.
-
state()pseudo-class -
:xr-overlaypseudo-class -
CSS nesting module
-
CSS scoping module
:hostpseudo-class:host()pseudo-class:host-context()pseudo-class:has-slottedpseudo-class::slottedpseudo-element
-
CSS overflow module
-
CSS multi-column layout module
-
CSS paged media module
-
CSS pseudo-element module (representing entities not included in HTML)
-
::partpseudo-element
-
Other pseudo-elements
-
@namespaceat-rule !important-
Document.querySelectormethod -
Document.querySelectorAllmethod -
NodeList.forEach()method
Specifications
| Specification |
|---|
| Selectors Level 4 |