Brief Summary
This document provides a comprehensive overview of CSS pseudo-elements, which are keywords added to selectors to style specific parts of an element. It explains the syntax, differentiates them from pseudo-classes, and details various types of pseudo-elements, including typographic, highlight, tree-abiding, element-backed, and form-related ones. The document also covers nesting pseudo-elements and provides an alphabetical index of all pseudo-elements defined by CSS specifications.
- Pseudo-elements style specific parts of an element.
- Double colons (::) distinguish them from pseudo-classes (:).
- Various types exist, including typographic, highlight, tree-abiding, element-backed, and form-related.
- Some pseudo-elements can be nested.
CSS Pseudo-Elements: Definition and Syntax
A CSS pseudo-element is a keyword added to a selector that allows you to style a specific part of the selected element. The syntax involves using a selector followed by ::pseudo-element and then defining the desired CSS properties. For example, p::first-line can style the first line of every paragraph. Double colons are used to differentiate pseudo-elements from pseudo-classes, which use a single colon. However, browsers support the single colon syntax for the original four pseudo-elements: ::before, ::after, ::first-line, and ::first-letter.
Pseudo-Element Behavior and Limitations
Pseudo-elements do not exist independently and must be part of an originating element. They should appear after all other components in a complex or compound selector, with the last element in the selector being the originating element. For instance, p::first-line is valid, but p::first-line > * is not. A pseudo-element can be selected based on the current state of its originating element, such as p:hover::first-line, which selects the first line of a paragraph when the paragraph is hovered over. If a selector list contains an invalid selector, the entire style block is ignored.
Typographic Pseudo-Elements
Typographic pseudo-elements include ::first-line, which styles the first line-box of the originating element, ::first-letter, which styles the first letter, number, or symbol on the first line, and ::cue, which styles WebVTT cues within a selected element for captions and other cues in media with VTT tracks. The CSS pseudo-elements module also defines ::postfix and ::prefix sub-pseudo elements, though these are not yet supported by any browser.
Highlight Pseudo-Elements
Highlight pseudo-elements select document sections based on content and document status, enabling those areas to be styled differently to indicate that status to the user. These include ::selection for styling the portion of a document that has been selected, ::target-text for styling the document's target element identified by the URL's fragment identifier, ::spelling-error for styling misspelled text, ::grammar-error for styling grammatically incorrect text, and ::highlight for styling elements in the highlight registry, used for creating custom highlights.
Tree-Abiding Pseudo-Elements
Tree-abiding pseudo-elements behave like regular elements, fitting seamlessly within the box model and acting as child elements that can be styled directly within the originating element hierarchy. These include ::before, which creates a pseudo-element as the first child of the selected element, ::after, which creates a pseudo-element as the last child, ::column for styling each column fragment of a multi-column layout, ::marker for styling the automatically generated marker box of a list item, ::backdrop for styling the backdrop of the originating element rendered in the top layer, ::scroll-button for creating a button to control scrolling, ::scroll-marker for creating a scroll target button, and ::scroll-marker-group for generating a container for scroll markers.
Element-Backed Pseudo-Elements
Element-backed pseudo-elements are real elements that are not otherwise selectable. These include ::details-content for styling the expandable/collapsible contents of a <details> element, ::part for styling any element within a shadow tree that has a matching part attribute, and ::slotted for styling any element placed into a slot inside an HTML template.
Form-Related Pseudo-Elements
Form-related pseudo-elements are related to form controls. These include ::checkmark for targeting the checkmark inside the selected <option> element of a customizable select element, ::file-selector-button for styling the button of an <input> of type="file", ::picker for styling the picker part of an element (e.g., the drop-down picker of a customizable select element), ::picker-icon for styling the picker icon inside form controls, and ::placeholder for styling the placeholder text in an input field.
Alphabetical Index of Pseudo-Elements
The document provides an alphabetical index of pseudo-elements defined by a set of CSS specifications, including: ::after, ::backdrop, ::before, ::column, ::checkmark, ::cue, ::details-content, ::file-selector-button, ::first-letter, ::first-line, ::grammar-error, ::highlight, ::marker, ::part, ::picker, ::picker-icon, ::placeholder, ::scroll-button, ::scroll-marker, ::scroll-marker-group, ::selection, ::slotted, ::spelling-error, ::target-text, ::view-transition, ::view-transition-image-pair, ::view-transition-group, ::view-transition-new, and ::view-transition-old.
Nesting Pseudo-Elements
Some pseudo-element selectors can be chained together to style pseudo-elements nested inside other pseudo-elements. Supported combinations include ::after::marker (when ::after is styled as a list item) and ::before::marker (when ::before is styled as a list item). The document directs readers to individual pseudo-element reference pages for examples and browser compatibility information.
