CSSPseudoElement: pseudo() method

Syntax

pseudo(type)

Parameters

type

A string representing the type of pseudo-element to return a representation of. Valid values are:

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

Return value

A CSSPseudoElement object instance, or null if type is not equal to a valid pseudo-element type.

Description

The CSSPseudoElement.pseudo() method is used to target a pseudo-element that is attached to another pseudo-element, rather than directly to a standard DOM element. For example, if a ::before pseudo-element generates a list marker — selectable via ::before::marker — this method can retrieve the ::marker nested inside that ::before. You call the method on the parent pseudo-element and pass the type of the nested child pseudo-element as an argument.

Provided its type parameter contains a valid pseudo-element type, pseudo() will always return a CSSPseudoElement instance, even if that pseudo-element hasn't been generated on the calling pseudo-element.

Examples

Basic usage

In this example, we demonstrate basic usage of the pseudo() method.

HTML

We include a <p> element containing text, and an <output> element to log output from JavaScript.

<p>New York's hottest club is...</p>
<output></output>

CSS

We give the <p> element's ::after pseudo-element some content and set its display to list-item so it will generate a ::marker. We also apply some basic styles.

body {
  width: 80%;
  margin: 0 auto;
}

p {
  background-color: violet;
  padding: 20px;
}

p::after {
  content: "Crease";
  background-color: cadetblue;
  padding: 20px;
  display: list-item;
}

p::after::marker {
  content: "🔹";
}

JavaScript

In our script, we grab references to our <p> and <output> elements, and retrieve CSSPseudoElement objects via the pseudo() method representing the <p> element's ::after pseudo-element, and the ::after pseudo-element's ::marker pseudo-element. We then log some details of the child pseudo-element to our <output> element. We also include some rudimentary error handling via a try...catch structure, to print an error message in non-supporting browsers.

const pElem = document.querySelector("p");
const output = document.querySelector("output");

try {
  const pseudoElem = pElem.pseudo("::after");
  const pseudoPseudoElem = pseudoElem.pseudo("::marker");
  output.textContent = `${pseudoPseudoElem.type} pseudo-element. Parent: ${pseudoPseudoElem.parent.type}. Ultimate originating element: <${pseudoPseudoElem.element.tagName.toLowerCase()}>`;
} catch (e) {
  output.textContent = `Your browser doesn't support CSSPseudoElement and/or the pseudo() method: ${e}`;
}

Result

Specifications

Browser compatibility

See also

• CSSPseudoElement.element
• CSSPseudoElement.parent
• Element.pseudo()