CSSPseudoElement: parent-Eigenschaft
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die parent-Eigenschaft der CSSPseudoElement Schnittstelle gibt eine Referenz auf das ursprüngliche Quell-Element des Pseudo-Elements zurück, welches ein Element oder ein CSSPseudoElement im Falle eines verschachtelten Pseudo-Elements sein kann.
Dies unterscheidet sich von der CSSPseudoElement.element Eigenschaft, die immer ein Element zurückgibt: Eine Referenz auf das ursprüngliche Quell-Element des Pseudo-Elements.
Wert
Ein Element oder ein CSSPseudoElement, das den unmittelbaren Elternteil des Pseudo-Elements darstellt.
Beispiele
Grundlegende Nutzung
In diesem Beispiel demonstrieren wir den Unterschied zwischen den Eigenschaften parent und element.
HTML
Wir fügen ein <p>-Element mit Text und ein <output>-Element hinzu, um Ausgaben aus JavaScript zu protokollieren.
<p>New York's hottest club is...</p>
<output></output>
CSS
Wir geben dem <p>-Element ein ::after Pseudo-Element mit etwas content und setzen dessen display auf list-item, damit es einen ::marker generiert. Wir wenden auch einige grundlegende Stile an.
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 holen wir Referenzen zu unserem <p>- und <output>-Element und rufen mittels der pseudo() Methode CSSPseudoElement Objekte 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 Kinder-Pseudo-Elements zu unserem <output>-Element. Außerdem fügen wir 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
| Spezifikation |
|---|
| CSS Pseudo-Elements Module Level 4 # dom-csspseudoelement-parent |