CSSPseudoElement: pseudo() Methode

Syntax

pseudo(type)

Parameter

type

Ein String, der den Typ des Pseudo-Elements repräsentiert, von dem eine Repräsentation zurückgegeben werden soll. Gültige Werte sind:

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

Rückgabewert

Eine CSSPseudoElement Objektinstanz oder null, wenn type nicht einem gültigen Pseudo-Element-Typ entspricht.

Beschreibung

Die CSSPseudoElement.pseudo() Methode wird verwendet, um ein Pseudo-Element zu adressieren, das an ein anderes Pseudo-Element angehängt ist, anstatt direkt an ein Standard-DOM-Element. Wenn beispielsweise ein ::before Pseudo-Element einen Listenmarker generiert — auswählbar über ::before::marker — kann diese Methode das ::marker verschachtelt in diesem ::before abrufen. Sie rufen die Methode auf dem übergeordneten Pseudo-Element auf und übergeben den Typ des verschachtelten untergeordneten Pseudo-Elements als Argument.

Wenn der type-Parameter einen gültigen Pseudo-Element-Typ enthält, gibt pseudo() immer eine CSSPseudoElement Instanz zurück, auch wenn dieses Pseudo-Element nicht auf dem aufrufenden Pseudo-Element generiert wurde.

Beispiele

Grundlegende Verwendung

In diesem Beispiel demonstrieren wir die grundsätzliche Verwendung der pseudo() Methode.

HTML

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

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

CSS

Wir geben dem <p> Element's ::after Pseudo-Element etwas content und setzen dessen display auf list-item, damit es ein ::marker generiert. Wir wenden auch 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 zu und rufen CSSPseudoElement Objekte über die pseudo() Methode ab, die das ::after Pseudo-Element des <p> Elements und das ::marker Pseudo-Element des ::after Pseudo-Elements repräsentieren. Wir protokollieren dann einige Details des untergeordneten Pseudo-Elements in unser <output> Element. Wir fügen auch eine rudimentäre Fehlerbehandlung über eine try...catch Struktur hinzu, um eine Fehlermeldung in nicht unterstützenden Browsern zu drucken.

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()