CSS-Pseudoelemente

Das CSS-Pseudoelement-Modul definiert abstrakte Elemente, die nicht direkt im Dokumentbaum vorhanden sind. Diese abstrakten Elemente, genannt Pseudoelemente, 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 über das hinausgehen, was der Dokumentbaum bietet.

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

Pseudoelemente ermöglichen das Targeting von Entitäten, die nicht im HTML enthalten sind, und von Inhaltsbereichen, die sonst nicht gezielt werden könnten, ohne zusätzliches Markup hinzuzufügen. Betrachten Sie den Platzhalter eines <input>-Elements. Dies ist ein abstraktes Element und kein eigener Knoten im Dokumentbaum. Sie können diesen Platzhalter auswählen, indem Sie das ::placeholder-Pseudoelement verwenden. Ein weiteres Beispiel ist das ::selection-Pseudoelement, das den Inhalt markiert, der aktuell von einem Benutzer hervorgehoben wird, sodass Sie das, was markiert ist, 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 und aktualisiert sich automatisch, wenn sich die Zeichenzahl der ersten Zeile ändert, ohne die Zeilenlänge des Elements abfragen zu müssen.