CSS-Pseudoelemente

Das CSS-Pseudoelement-Modul definiert abstrakte Elemente, die nicht direkt im Dokumentbaum vorhanden sind. Diese abstrakten Elemente, sogenannte Pseudoelemente, repräsentieren Teile des Renderbaums, die ausgewählt und gestaltet werden können. Pseudoelemente werden verwendet, um Abstraktionen zum Dokumentbaum zu schaffen, die über den bereitgestellten Dokumentbaum hinausgehen.

Pseudoelemente werden mit einem Doppelpunkt (::) vorangestellt. Sie fügen Pseudoelemente zu Selektoren hinzu (wie in p::first-line), um diese Falschelemente anzusprechen und zu gestalten.

Pseudoelemente ermöglichen das Ansprechen von Entitäten, die nicht im HTML enthalten sind, und von Inhaltsabschnitten, die nicht anders angesprochen werden können, ohne zusätzliches Markup hinzuzufügen. Betrachten Sie den Platzhalter eines <input>-Elementes. Dies ist ein abstraktes Element und kein eigenes Knoten im Dokumentbaum. Sie können diesen Platzhalter auswählen, indem Sie das Pseudoelement ::placeholder verwenden. Ein weiteres Beispiel ist das Pseudoelement ::selection, das den aktuell vom Benutzer hervorgehobenen Inhalt abgleicht und es ermöglicht, das Hervorgehobene zu gestalten, während der Benutzer mit dem Inhalt interagiert und die Auswahl ändert. Ebenso zielt das Pseudoelement ::first-line 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.