CSS-Pseudoelemente

Das CSS-Pseudoelement-Modul definiert abstrakte Elemente, die nicht direkt im Dokumentbaum vorhanden sind. Diese abstrakten Elemente, Pseudoelemente genannt, stellen Teile des Renderbaums dar, die ausgewählt und gestylt werden können. Pseudoelemente werden verwendet, um Abstraktionen über den Dokumentbaum hinaus zu erstellen, die über den im Dokumentbaum bereitgestellten hinausgehen.

Pseudoelemente werden mit einem Doppelpunkt (::) vorangestellt. Sie fügen Pseudoelemente zu Selektoren hinzu (wie in p::first-line), um diese Schein-Elemente anzuvisieren und zu stylen.

Pseudoelemente ermöglichen das Anvisieren von Entitäten, die nicht in HTML enthalten sind, und von Inhalten, die sonst nicht ohne zusätzlichen Markup anvisiert werden können. Betrachten Sie den Platzhalter eines <input>-Elements. Dies ist ein abstraktes Element und kein eigenständiger Knoten im Dokumentbaum. Sie können diesen Platzhalter mit dem ::placeholder Pseudoelement auswählen. Ein weiteres Beispiel ist das ::selection Pseudoelement, das den derzeit von einem Benutzer hervorgehobenen Inhalt abgleicht, sodass Sie das, was mit dem Inhalt abgeglichen wird, stylen können, während der Benutzer damit interagiert und die Auswahl ändert. Ähnlich zielt das ::first-line Pseudoelement auf die erste Zeile eines Elements ab und aktualisiert sich automatisch, wenn sich die Zeichenzahl der ersten Zeile ändert, ohne die Zeilenlänge des Elements abfragen zu müssen.