CSS-Pseudo-Elemente

Das CSS-Pseudo-Element-Modul definiert abstrakte Elemente, die nicht direkt im Dokumentbaum vorhanden sind. Diese abstrakten Elemente, sogenannte Pseudo-Elemente, repräsentieren Teile des Renderbaums, die ausgewählt und gestylt werden können. Pseudo-Elemente werden verwendet, um Abstraktionen über den Dokumentbaum hinaus zu schaffen, die vom Dokumentbaum bereitgestellt werden.

Pseudo-Elemente werden mit einem doppelten Doppelpunkt (::) versehen. Sie fügen Pseudo-Elemente zu Selektoren hinzu (wie in p::first-line), um diese komplexen Elemente zu adressieren und zu stylen.

Pseudo-Elemente ermöglichen es, Entitäten anzusprechen, die nicht im HTML enthalten sind, und Abschnitte von Inhalten, die andernfalls nicht zielgerichtet werden können, ohne zusätzliches Markup hinzuzufügen. Ziehen Sie das Placeholder eines <input>-Elements in Betracht. Dies ist ein abstraktes Element und kein separates Node im Dokumentbaum. Sie können dieses Placeholder mit dem ::placeholder-Pseudo-Element auswählen. Ein weiteres Beispiel ist das ::selection-Pseudo-Element, das den Inhalt auswählt, der derzeit von einem Benutzer hervorgehoben wird, sodass Sie stylen können, was übereinstimmt, während der Benutzer mit dem Inhalt interagiert und die Auswahl verändert. In ähnlicher Weise zielt das ::first-line-Pseudo-Element auf die erste Zeile eines Elements ab, die sich automatisch aktualisiert, wenn sich die Zeichenanzahl der ersten Zeile ändert, ohne dass die Zeilenlänge des Elements abgefragt werden muss.