CSSPseudoElement

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.element Schreibgeschützt

Gibt das letzte ursprüngliche Element des Pseudoelements zurück.

CSSPseudoElement.parent Schreibgeschützt

Gibt das unmittelbare ursprüngliche Element des Pseudoelements zurück.

CSSPseudoElement.type Schreibgeschützt

Gibt den Pseudoelement-Selektor als Zeichenkette zurück.

Instanz-Methoden

CSSPseudoElement.pseudo()

Gibt eine CSSPseudoElement Instanz 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:

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

Die Eigenschaften CSSPseudoElement.element und CSSPseudoElement.parent klingen ähnlich, weisen jedoch einen Unterschied in der Funktionalität auf:

• Die element-Eigenschaft gibt immer ein Element zurü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 ein Element oder ein CSSPseudoElement im 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

Browser-Kompatibilität

Siehe auch

• Element.pseudo()
• Web Animations API
• Element.animate()
• CSS-Pseudoelemente Modul