CSSPseudoElement

Limited availability

The CSSPseudoElement interface represents a pseudo-element.

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

Instance properties

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

Instance methods

• pseudo() Experimental
  • : 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 pseudo() method, or a representation of a nested pseudo-element (for example, the ::marker in ::before::marker) using the pseudo() method.

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

• ::after
• ::before
• ::marker

The element and 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

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

Browser compatibility

See also

• pseudo()
• Web Animations API
• animate()
• CSS pseudo-elements module