CSS-Pseudo-Elemente

Das CSS-Pseudo-Element-Modul definiert abstrakte Elemente, die nicht direkt im Dokumentbaum vorhanden sind. Diese abstrakten Elemente, Pseudo-Elemente genannt, repräsentieren Teile des Rendering-Baums, die ausgewählt und gestylt werden können. Pseudo-Elemente werden verwendet, um Abstraktionen über den Dokumentbaum hinaus zu erstellen, die über den vom Dokumentbaum bereitgestellten Rahmen hinausgehen.

Pseudo-Elemente werden mit einem Doppeldoppelpunkt (::) vorangestellt. Sie fügen Pseudo-Elemente zu Selektoren hinzu (wie in p::first-line), um diese fingierten Elemente anzusprechen und zu stylen.

Pseudo-Elemente ermöglichen die gezielte Ansprache von Entitäten, die nicht in HTML enthalten sind, und von Inhaltsbereichen, die anderweitig nicht ohne zusätzliche Markup-Zeilen angesprochen 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-Pseudo-Element auswählen. Ein weiteres Beispiel ist das ::selection-Pseudo-Element, das den aktuell von einem Benutzer hervorgehobenen Inhalt erreicht, sodass Sie das übereinstimmende Styling anpassen können, während der Benutzer mit dem Inhalt interagiert und die Auswahl ändert. Ebenso zielt das ::first-line-Pseudo-Element auf die erste Zeile eines Elements ab und wird automatisch aktualisiert, wenn sich die Zeichenzahl der ersten Zeile ändert, ohne die Zeilenlänge des Elements abfragen zu müssen.