CSS-Pseudoelemente

Das CSS-Pseudoelement-Modul definiert abstrakte Elemente, die nicht direkt im Dokumentbaum vorhanden sind. Diese abstrakten Elemente, Pseudoelemente genannt, repräsentieren Teile des Renderbaums, die ausgewählt und gestylt werden können. Pseudoelemente werden verwendet, um Abstraktionen über den Dokumentbaum hinaus zu schaffen, die von diesem nicht bereitgestellt werden.

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

Pseudoelemente ermöglichen das Anvisieren von Entitäten, die nicht in HTML enthalten sind und von Inhaltsbereichen, die ansonsten nicht ohne zusätzlichen Markup angesprochen werden könnten. Betrachten Sie den Platzhalter eines <input>-Elements. Dies ist ein abstraktes Element und kein separates Knoten im Dokumentbaum. Sie können diesen Platzhalter mithilfe des ::placeholder-Pseudoelements auswählen. Ein weiteres Beispiel ist das ::selection-Pseudoelement, das den aktuell vom Benutzer hervorgehobenen Inhalt abgleicht und erlaubt, das Hervorheben zu stylen, wenn der Benutzer mit dem Inhalt interagiert und die Auswahl ändert. Ebenso zielt das ::first-line-Pseudoelement auf die erste Zeile eines Elements ab, die sich automatisch aktualisiert, wenn sich die Zeichenzahl der ersten Zeile ändert, ohne die Zeilenlänge des Elements abfragen zu müssen.