CSSPseudoElement

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The CSSPseudoElement interface represents a pseudo-element.

Instances of this interface may be obtained by calling Element.pseudo() or CSSPseudoElement.pseudo().

Instance properties

CSSPseudoElement.element Read only: Returns the ultimate originating Element of the pseudo-element.
CSSPseudoElement.parent Read only: Returns the immediate originating element of the pseudo-element.
CSSPseudoElement.type Read only: Returns the pseudo-element selector as a string.

Instance methods

CSSPseudoElement.pseudo(): Returns a CSSPseudoElement instance representing a specific nested pseudo-element

Description

The CSSPseudoElement interface represents a pseudo-element. You can retrieve a representation of a pseudo-element attached to a DOM element using the Element.pseudo() method, or a representation of a nested pseudo-element (for example, the ::marker in ::before::marker) using the CSSPseudoElement.pseudo() method.

The CSSPseudoElement.type property returns a string representing the type of the pseudo-element. Supported types are:

The CSSPseudoElement.element and CSSPseudoElement.parent properties sound similar, but they have a difference in functionality:

The element property always returns an Element: A reference to the ultimate originating element of the pseudo-element or nested pseudo-element.
The parent property returns a reference to the pseudo-element's immediate originating element: This can be either an Element, or a CSSPseudoElement in the case of a nested pseudo-element.

Examples

undefined

Basic example using Element.pseudo

Using pseudo-elements, most modern browsers will automatically add quotation marks around text inside a <q> element. (A style rule may be needed to add quotation marks in older browsers.) The example below demonstrates the basic properties of the CSSPseudoElement object representing the opening quotation mark.

const element = document.querySelector("q");
const cssPseudoElement = element.pseudo("::before");
console.log(cssPseudoElement.element); // Outputs [object HTMLQuoteElement]
console.log(cssPseudoElement.type); // Outputs '::before'

Specifications

CSS Pseudo-Elements Module Level 4