CSS-Pseudoelemente

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

Pseudoelemente sind mit einem doppelten Doppelpunkt (::) versehen. Sie fügen Pseudoelemente 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 Inhaltsabschnitte, die sonst nicht ohne das Hinzufügen von zusätzlichem Markup gezielt 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 Pseudoelement ::placeholder auswählen. Ein weiteres Beispiel ist das Pseudoelement ::selection, das den aktuell von einem Benutzer hervorgehobenen Inhalt abgleicht und es Ihnen ermöglicht, das Gezielte zu stylen, während der Benutzer mit dem Inhalt interagiert und die Auswahl ändert. Ebenso zielt das Pseudoelement ::first-line auf die erste Zeile eines Elements und wird automatisch aktualisiert, wenn sich die Zeichenanzahl der ersten Zeile ändert, ohne die Zeilenlänge des Elements abzufragen.