CSSPseudoElement.pseudo() — Methode · JavaScript-Referenz

Signatur

CSSPseudoElement.prototype.pseudo(type)

Beschreibung

Die Methode pseudo() der Schnittstelle CSSPseudoElement liefert ein weiteres CSSPseudoElement-Objekt, das ein verschachteltes Pseudo-Element darstellt. Damit kommt man per Skript an Konstrukte wie ::before::marker oder ::after::marker, die in CSS als Pseudo-Elemente von Pseudo-Elementen definiert sind.

Der Einstieg läuft in der Regel über Element.pseudo(): Dort holt man zuerst das äußere Pseudo-Element (z. B. ::before) und ruft dann auf dessen CSSPseudoElement-Objekt pseudo() mit dem inneren Typ auf. So entsteht eine Kette, die dieselbe Struktur hat wie der CSS-Selektor.

Nützlich ist das vor allem für Werkzeuge wie Devtools, Stil-Inspektoren oder Animations-Bibliotheken, die Pseudo-Elemente als eigenständige Ereignisziele (CSSPseudoElement erbt von EventTarget) oder als Animationsziele ansprechen möchten. Ist die Kombination ungültig oder wird sie nicht unterstützt, gibt die Methode null zurück.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Typ des verschachtelten Pseudo-Elements als CSS-Selektor mit führendem Doppelpunkt, z. B. `"::marker"`. Die Schreibweise mit einem Doppelpunkt (Legacy-Syntax wie `":before"`) wird laut Spezifikation nur für die klassischen Pseudo-Elemente akzeptiert.

Rückgabewert

Typ

CSSPseudoElement | null

Beschreibung

Ein CSSPseudoElement für das verschachtelte Pseudo-Element oder null, wenn type ungültig ist, nicht unterstützt wird oder als Unterelement des aktuellen Pseudo-Elements nicht erlaubt ist. Mehrfache Aufrufe mit demselben Typ liefern dasselbe Objekt.

Beispiele

Marker innerhalb von ::before ansprechen

// CSS: li::before { content: 'Hinweis'; display: list-item; }
const item = document.querySelector('li');

if (typeof item.pseudo === 'function') {
  const before = item.pseudo('::before');
  const marker = before?.pseudo('::marker');

  console.log(before?.type);   // äußeres Pseudo-Element
  console.log(marker?.type);   // verschachteltes Pseudo-Element
  console.log(marker?.element === item);
} else {
  console.log('Element.pseudo() wird nicht unterstützt');
}

::before ::marker true (bzw. „Element.pseudo() wird nicht unterstützt“ in aktuellen Browsern)

Ungültige Verschachtelung liefert null

const box = document.querySelector('.box');
const after = box.pseudo?.('::after');

if (after) {
  // ::selection ist innerhalb von ::after nicht erlaubt
  console.log(after.pseudo('::selection'));
  console.log(after.pseudo('::marker') !== null);
}

null true

Hilfsfunktion mit Feature-Erkennung

// Liefert ein verschachteltes Pseudo-Element oder null – ohne Exceptions
const getNestedPseudo = (el, outer, inner) => {
  if (typeof el?.pseudo !== 'function') return null;
  const outerPseudo = el.pseudo(outer);
  if (!outerPseudo || typeof outerPseudo.pseudo !== 'function') return null;
  return outerPseudo.pseudo(inner);
};

const marker = getNestedPseudo(document.querySelector('h2'), '::before', '::marker');
console.log(marker ? `Gefunden: ${marker.type}` : 'Nicht verfügbar');

Nicht verfügbar

// Wichtig · Fallstricke

Experimentell: CSSPseudoElement samt pseudo() ist Teil des Entwurfs CSS Pseudo-Elements Level 4. Kein großer Browser liefert die Methode derzeit standardmäßig aus (Firefox hatte CSSPseudoElement zeitweise hinter einem Flag). Vor der Nutzung immer mit typeof obj.pseudo === 'function' prüfen.
Nur bestimmte Kombinationen sind gültig – vor allem ::before::marker und ::after::marker. Alles andere liefert null statt einer Exception, also den Rückgabewert immer prüfen (z. B. mit optionaler Verkettung ?.).
Das zurückgegebene Objekt existiert unabhängig davon, ob das Pseudo-Element gerade tatsächlich gerendert wird (z. B. ohne content oder ohne display: list-item). Seine Existenz sagt nichts über die Sichtbarkeit aus.
Stile lassen sich über das Objekt nicht direkt setzen; zum Auslesen weiterhin getComputedStyle(element, '::before') verwenden. Verschachtelte Pseudo-Elemente werden von getComputedStyle() nicht überall unterstützt.

Siehe auch

Element.pseudo() HTMLTableSectionElement.insertRow() HTMLMediaElement.pause() Element.append() HTMLMediaElement.load()