Element: pseudo()-Methode

Syntax

pseudo(type)

Parameter

type

Eine Zeichenfolge, die den Typ des Pseudoelements angibt, für das eine Repräsentation zurückgegeben werden soll. Gültige Werte sind:

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

Rückgabewert

Eine CSSPseudoElement-Objektinstanz oder null, wenn type keinem gültigen Pseudoelementtyp entspricht.

Beispiele

Grundlegende Verwendung

Dieses Beispiel zeigt die grundlegende Verwendung der pseudo()-Methode.

HTML

Wir fügen ein <p>-Element mit Text und ein <output>-Element zur Ausgabe von JavaScript-Ergebnissen ein.

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

CSS

Wir weisen dem ::after-Pseudoelement des <p>-Elements einen content-Wert zu und versehen beide mit einfachen Stilen.

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

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

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

JavaScript

In unserem Skript rufen wir Referenzen auf die Elemente <p> und <output> ab. Mithilfe der pseudo()-Methode erhalten wir ein CSSPseudoElement, das das ::after-Pseudoelement des <p>-Elements repräsentiert. Anschließend geben wir einige Details zum Pseudoelement im <output>-Element aus. Außerdem verwenden wir eine einfache Fehlerbehandlung mit einer try...catch-Struktur, um in Browsern ohne Unterstützung eine Fehlermeldung auszugeben.

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

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

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSSPseudoElement.pseudo()