CSSPseudoElement.type — Eigenschaft · JavaScript-Referenz

Signatur

CSSPseudoElement.type

Beschreibung

Die Eigenschaft type der Schnittstelle CSSPseudoElement gibt an, welches Pseudo-Element ein Objekt darstellt. Der Wert ist eine Zeichenkette in Selektor-Schreibweise mit zwei Doppelpunkten, also etwa "::before", "::after" oder "::marker".

Ein CSSPseudoElement bekommt man über Element.prototype.pseudo(type). Diese Methode liefert das Pseudo-Element eines echten DOM-Elements als eigenes Objekt, an dem man z. B. Event-Listener anmelden oder Animationen starten kann (CSSPseudoElement erbt von EventTarget). Mit type lässt sich später feststellen, um welche Art Pseudo-Element es sich handelt. Das hilft vor allem in allgemeinem Code, der mehrere Pseudo-Elemente gleich behandelt, oder in Event-Handlern, die an mehreren Pseudo-Elementen hängen.

Zusammen mit CSSPseudoElement.element (dem zugehörigen Ursprungselement) lässt sich so ein Selektor wie div.card::before wieder zusammensetzen, etwa für Protokolle oder Werkzeuge zur Fehlersuche.

Rückgabewert

Typ

string

Beschreibung

Der Typ des Pseudo-Elements als CSS-Selektor mit zwei Doppelpunkten, z. B. "::before". Die Eigenschaft ist schreibgeschützt.

Beispiele

Pseudo-Element abrufen und Typ auslesen

const card = document.querySelector('.card');

// Funktionsprüfung: Element.pseudo() ist experimentell
if (typeof card.pseudo === 'function') {
  const before = card.pseudo('::before');
  console.log(before?.type);
} else {
  console.log('CSSPseudoElement wird nicht unterstützt');
}

::before

Selektor für Protokolle rekonstruieren

const describePseudo = (pseudo) => {
  const el = pseudo.element;
  const id = el.id ? `#${el.id}` : '';
  const classes = [...el.classList].map((c) => `.${c}`).join('');
  return `${el.localName}${id}${classes}${pseudo.type}`;
};

const list = document.querySelector('li.item');
if (list?.pseudo) {
  const marker = list.pseudo('::marker');
  if (marker) console.log(describePseudo(marker));
}

li.item::marker

Gemeinsamer Handler für mehrere Pseudo-Elemente

const button = document.querySelector('#cta');

const handleClick = (event) => {
  // event.currentTarget ist das CSSPseudoElement
  switch (event.currentTarget.type) {
    case '::before':
      console.log('Icon links geklickt');
      break;
    case '::after':
      console.log('Pfeil rechts geklickt');
      break;
  }
};

if (button?.pseudo) {
  for (const sel of ['::before', '::after']) {
    button.pseudo(sel)?.addEventListener('click', handleClick);
  }
}

Icon links geklickt

// Wichtig · Fallstricke

Experimentell: CSSPseudoElement und Element.pseudo() werden derzeit von keinem großen Browser stabil unterstützt (Firefox hatte zeitweise eine Umsetzung hinter einem Flag). Vor der Nutzung immer mit typeof el.pseudo === 'function' prüfen und eine Ausweichlösung vorsehen.
Schreibgeschützt: Eine Zuweisung wie pseudo.type = '::after' hat keine Wirkung (im Strict-Modus gibt es einen TypeError). Für ein anderes Pseudo-Element ruft man element.pseudo() erneut auf.
Schreibweise: Der Wert hat immer zwei Doppelpunkte ("::before"), auch wenn im Stylesheet die alte Form mit einem Doppelpunkt (:before) steht. Werte deshalb nicht ohne einheitliche Schreibweise vergleichen.
element.pseudo() gibt bei ungültigen oder nicht unterstützten Typen null zurück. Deshalb vor dem Zugriff auf type optionale Verkettung (?.) verwenden.
Den berechneten Stil eines Pseudo-Elements liest man browserübergreifend weiterhin mit getComputedStyle(el, '::before') aus.

Siehe auch

Element.prototype.pseudo() ClipboardChangeEvent.types CSSPseudoElement.element CSSPseudoElement.parent SVGStyleElement.type