CSSPseudoElement: pseudo() Methode

Syntax

pseudo(type)

Parameter

type

Ein String, der den Typ des Pseudoelements angibt, von dem eine Darstellung zurückgegeben werden soll. Gültige Werte sind:

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

Rückgabewert

Ein CSSPseudoElement-Objektinstanz oder null, wenn type nicht gleich einem gültigen Pseudoelement-Typ ist.

Beschreibung

Die Methode CSSPseudoElement.pseudo() wird verwendet, um ein Pseudoelement zu adressieren, das an ein anderes Pseudoelement angehängt ist, anstatt direkt an ein standardmäßiges DOM-Element. Wenn zum Beispiel ein ::before-Pseudoelement eine Listenmarkierung erzeugt — auswählbar über ::before::marker — kann diese Methode das ::marker abrufen, das innerhalb dieses ::before verschachtelt ist. Sie rufen die Methode auf dem übergeordneten Pseudoelement auf und übergeben den Typ des verschachtelten Kinderpseudoelements als Argument.

Solange der type-Parameter einen gültigen Pseudoelementtyp enthält, wird pseudo() immer eine CSSPseudoElement-Instanz zurückgeben, auch wenn dieses Pseudoelement auf dem aufrufenden Pseudoelement nicht erzeugt wurde.

Beispiele

Grundlegende Verwendung

In diesem Beispiel zeigen wir die grundlegende Verwendung der pseudo()-Methode.

HTML

Wir fügen ein <p>-Element mit Text ein und ein <output>-Element, um die Ausgabe von JavaScript aufzuzeichnen.

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

CSS

Wir geben dem <p>-Element das ::after-Pseudoelement mit etwas content und setzen dessen display auf list-item, sodass es einen ::marker erzeugt. Außerdem wenden wir einige grundlegende Stile an.

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 unserem Skript greifen wir auf unsere <p>- und <output>-Elemente und beziehen CSSPseudoElement-Objekte über die pseudo()-Methode, die das ::after-Pseudoelement des <p>-Elements und das ::marker-Pseudoelement des ::after-Pseudoelements darstellen. Dann protokollieren wir einige Details des Kinderpseudoelements in unser <output>-Element. Wir fügen auch eine grundlegende Fehlerbehandlung über eine try...catch-Struktur hinzu, um eine Fehlermeldung in nicht unterstützenden Browsern auszugeben.

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}`;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

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