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 gestaltet werden können. Pseudoelemente werden verwendet, um Abstraktionen über den Dokumentbaum hinaus zu erstellen.

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

Pseudoelemente ermöglichen es, Entitäten zu zielen, die nicht in HTML enthalten sind, und Inhaltsbereiche, die ansonsten nicht gezielt werden können, ohne zusätzlichen Markup hinzuzufügen. 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 Inhalt entspricht, der derzeit von einem Benutzer hervorgehoben wird, sodass Sie das, was übereinstimmt, stylen können, während der Benutzer mit dem Inhalt interagiert und die Auswahl ändert. Ebenso zielt das ::first-line-Pseudoelement auf die erste Zeile eines Elements ab und aktualisiert sich automatisch, wenn sich die Zeichenanzahl der ersten Zeile ändert, ohne die Zeilenlänge des Elements abfragen zu müssen.