JavaScript Element pseudo() Method
Definition
The Element.pseudo() method returns a CSSPseudoElement for a CSS pseudo-element type on this element (MDN) — currently ::before, ::after, or ::marker.
Pass the required arguments shown below. Check return values and browser support before you rely on the result.
Syntax
Call el.pseudo. Start with this line.
| Call | What it does |
|---|
el.pseudo(type) | Primary signature. |
el.pseudo(...) | Call with the arguments your case needs. |
Built into the browser. Call pseudo(...) on an Element — no import required.
Library declarations
Parameters
| Parameter | Description |
|---|
| type | Required. "::before", "::after", or "::marker" |
Return Value
| Return Value | Description |
|---|
| * | CSSPseudoElement or null |
JavaScript Examples
Example 1 — Basic Usage (MDN)
Get ::after and print its type and parent tag.
const pElem = document.querySelector("p");
const output = document.getElementById("out");
try {
const pe = pElem.pseudo("::after");
output.textContent =
pe.type + " · parent <" + pe.parent.tagName.toLowerCase() + ">";
} catch (e) {
output.textContent = "Unsupported: " + e;
}
How It Works
- Select the element that owns the pseudo-element.
- Call
pseudo("::after") inside try (MDN pattern). - Read
type and parent from the returned object. - Catch errors when the API is missing.
Example 2 — Feature Detect
Check for the method before calling it.
const el = document.getElementById("demo");
const out = document.getElementById("out");
if (typeof el.pseudo !== "function") {
out.textContent = "pseudo() not supported";
} else {
const pe = el.pseudo("::before");
out.textContent = pe ? pe.type : "null";
}
How It Works
- Test the method with
typeof el.pseudo === "function". - Bail early on unsupported engines.
- Call only when present to avoid surprises.
- Still null-check the return for invalid types.
Example 3 — Invalid Type Returns null
MDN: an unrecognized type string yields null.
const el = document.getElementById("demo");
const out = document.getElementById("out");
try {
const pe = el.pseudo("::not-a-real-pseudo");
out.textContent = pe === null ? "null" : pe.type;
} catch (e) {
out.textContent = "Unsupported: " + e;
}
How It Works
- Pass a bad type string.
- MDN: return is
null when the type is not valid. - Do not read
.type without a null check. - Still use try/catch for unsupported browsers.
Compatibility
Browser Support
Element.pseudo() is Experimental with Limited availability on MDN (not Baseline). Check compatibility before shipping. See the MDN pseudo() reference.
✓ Experimental
Element.pseudo()
Returns a CSSPseudoElement handle for ::before, ::after, or ::marker. Feature-detect first.
Google Chrome Check MDN
Partial
Microsoft Edge Check MDN
Partial
Mozilla Firefox Check MDN
Partial
Apple Safari Check MDN
Partial
Opera Check MDN
Partial
Internet Explorer Not supported
Nopseudo() Experimental
Bottom line: Prefer getComputedStyle(el, pseudo) for portable style reads. Use Element.pseudo() only behind feature detection.
Frequently Asked Questions
MDN: it returns a CSSPseudoElement representing the CSS pseudo-element of the given type associated with the element.
MDN marks Element.pseudo() as Experimental with limited availability (not Baseline). Feature-detect before using it in production.
A CSSPseudoElement when type is a valid pseudo-element string (::before, ::after, or ::marker), or null if type is not valid (MDN).
MDN: if type is valid, pseudo() returns a CSSPseudoElement even when that pseudo-element has not been generated on the element yet.
MDN: type (selector string), parent (immediate originator), and element (ultimate originating Element).
Check typeof el.pseudo === "function" and wrap calls in try/catch for browsers that throw when unsupported.
Next: querySelector()
Continue with the Element querySelector() method.
About the author
Developer, cloud engineer, and technical writer
I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.
14 people found this page helpful
