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 erstellen, die über den vom Dokumentbaum bereitgestellten hinausgehen.

Pseudoelemente haben ein Präfix mit einem doppelten Doppelpunkt (::). Sie fügen Selektoren Pseudoelemente hinzu (wie in p::first-line), um diese Schein-Elemente zu zielgerichtet auszuwählen und zu gestalten.

Pseudoelemente ermöglichen es, Entitäten zu nutzen, die nicht im HTML enthalten sind, sowie Inhaltsbereiche zu zielgerichtet auswählen, die sonst nicht ohne zusätzliche Markups zielgerichtet erreichbar wären. Betrachten Sie den Platzhalter eines <input>-Elements. Dies ist ein abstraktes Element und kein eigenständiger Knoten im Dokumentbaum. Sie können diesen Platzhalter mithilfe des ::placeholder-Pseudoelements auswählen. Ein weiteres Beispiel ist das ::selection-Pseudoelement, das den aktuell von einem Benutzer markierten Inhalt übereinstimmt und Ihnen erlaubt zu gestalten, was angezeigt wird, während der Benutzer mit dem Inhalt interagiert und die Auswahl ändert. Ähnlich 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 dass die Zeilenlänge des Elements abgefragt werden muss.