CSSPseudoElement
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Das CSSPseudoElement Interface repräsentiert ein Pseudoelement.
Instanzen dieses Interfaces können durch Aufrufen von Element.pseudo() oder CSSPseudoElement.pseudo() erhalten werden.
Instanz-Eigenschaften
CSSPseudoElement.elementSchreibgeschützt-
Gibt das letzte ursprüngliche
Elementdes Pseudoelements zurück. CSSPseudoElement.parentSchreibgeschützt-
Gibt das unmittelbare ursprüngliche Element des Pseudoelements zurück.
CSSPseudoElement.typeSchreibgeschützt-
Gibt den Pseudoelement-Selektor als Zeichenkette zurück.
Instanz-Methoden
CSSPseudoElement.pseudo()-
Gibt eine
CSSPseudoElementInstanz zurück, die ein spezifisches verschachteltes Pseudoelement darstellt.
Beschreibung
Das CSSPseudoElement Interface repräsentiert ein Pseudoelement. Sie können eine Repräsentation eines Pseudoelements, das einem DOM-Element zugeordnet ist, mit der Methode Element.pseudo() abrufen oder eine Repräsentation eines verschachtelten Pseudoelements (zum Beispiel der ::marker in ::before::marker) mit der Methode CSSPseudoElement.pseudo().
Die Eigenschaft CSSPseudoElement.type gibt eine Zeichenkette zurück, die den Typ des Pseudoelements repräsentiert. Unterstützte Typen sind:
Die Eigenschaften CSSPseudoElement.element und CSSPseudoElement.parent klingen ähnlich, weisen jedoch einen Unterschied in der Funktionalität auf:
- Die
element-Eigenschaft gibt immer einElementzurück: Eine Referenz zum letzten ursprünglichen Element des Pseudoelements oder des verschachtelten Pseudoelements. - Die
parent-Eigenschaft gibt eine Referenz zum unmittelbaren ursprünglichen Element des Pseudoelements zurück: Dies kann entweder einElementoder einCSSPseudoElementim Fall eines verschachtelten Pseudoelements sein.
Beispiele
Einfaches Beispiel mit Element.pseudo
Mit Pseudoelementen fügen die meisten modernen Browser automatisch Anführungszeichen um den Text in einem <q>-Element hinzu. (Eine Stilregel kann erforderlich sein, um in älteren Browsern Anführungszeichen hinzuzufügen.) Das folgende Beispiel zeigt die grundlegenden Eigenschaften des CSSPseudoElement Objekts, das das öffnende Anführungszeichen darstellt.
const element = document.querySelector("q");
const cssPseudoElement = element.pseudo("::before");
console.log(cssPseudoElement.element); // Outputs [object HTMLQuoteElement]
console.log(cssPseudoElement.type); // Outputs '::before'
Spezifikationen
| Spezifikation |
|---|
| CSS Pseudo-Elements Module Level 4 # CSSPseudoElement-interface |