CSS-Pseudo-Elemente
Das CSS-Pseudo-Elemente-Modul definiert abstrakte Elemente, die nicht direkt im Dokumentbaum vorhanden sind. Diese abstrakten Elemente, sogenannte Pseudo-Elemente, repräsentieren Teile des Render-Baums, die ausgewählt und gestaltet werden können. Pseudo-Elemente werden verwendet, um Abstraktionen über den Dokumentbaum hinaus zu schaffen, die vom Dokumentbaum selbst nicht bereitgestellt werden.
Pseudo-Elemente werden durch zwei Doppelpunkte (::
) vorangestellt. Sie fügen Selektoren Pseudo-Elemente hinzu (wie bei p::first-line
), um diese künstlichen Elemente gezielt anzusprechen und zu gestalten.
Pseudo-Elemente ermöglichen das Ansprechen von Entitäten, die nicht im HTML enthalten sind, sowie von Inhaltsbereichen, die sonst nicht ohne zusätzliche Markup-Elemente gezielt angesprochen werden könnten. Betrachten Sie beispielsweise 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 ansprechen. Ein weiteres Beispiel ist das ::selection
-Pseudo-Element, das den Inhalt anspricht, der derzeit von einem Benutzer hervorgehoben wird, und es erlaubt, diesen Bereich während der Interaktion mit dem Benutzer stilistisch zu verändern. Ebenso ermöglicht das ::first-line
-Pseudo-Element, die erste Zeile eines Elements anzusprechen. Diese wird automatisch aktualisiert, wenn sich die Zeichenanzahl der ersten Zeile ändert, ohne die Zeilenlänge des Elements abfragen zu müssen.
Referenz
Selektoren
::after
::before
::file-selector-button
::first-letter
::first-line
::grammar-error
::highlight()
::marker
::placeholder
::selection
::spelling-error
::target-text
Die Spezifikation definiert auch die Pseudo-Elemente ::details-content
und ::search-text
sowie die Sub-Pseudo-Elemente ::postfix
und ::prefix
. Diese werden derzeit von keinem Browser unterstützt. Das ::highlight()
-Pseudo-Element ist in diesem Modul enthalten, die meisten Details hierzu werden jedoch in der CSS Custom Highlight API spezifiziert.
Schnittstellen
CSSPseudoElement
-SchnittstelleCSSPseudoElement.element
-EigenschaftCSSPseudoElement.type
-Eigenschaft
Begriffe
- Pseudo-Element Glossarbegriff
Leitfäden
- CSS-Pseudo-Elemente
-
Alphabetische Liste der in allen CSS-Spezifikationen und WebVTT definierten Pseudo-Elemente.
- Lernen: Pseudo-Klassen und Pseudo-Elemente
-
Teil des CSS-Abschnitts über Selektoren. Dieser Artikel definiert, was ein Pseudo-Element ist, wie es mit Pseudo-Klassen kombiniert und für das Generieren von Inhalten mit den Pseudo-Elementen
::before
und::after
verwendet werden kann. - Anleitung: Schöne Boxen mit Hilfe von Pseudo-Elementen erstellen
-
Beispiel für das stilistische Gestalten generierter Inhalte mithilfe der Pseudo-Elemente
::before
und::after
für visuelle Effekte.
Verwandte Konzepte
::backdrop
-
Web Video Text Tracks Format (WebVTT)-Cues:
-
CSS Scoping-Modul
-
CSS Shadow-Parts-Modul
-
CSS View Transitions-Modul
::view-transition
Experimentell::view-transition-image-pair()
Experimentell::view-transition-group()
Experimentell::view-transition-new()
Experimentell::view-transition-old()
Experimentell
-
placeholder
-Attribut des<input>
-Elements -
:placeholder-shown
-Selektor -
AnimationEvent.pseudoElement
-Eigenschaft -
KeyframeEffect.pseudoElement
-Eigenschaft -
TransitionEvent.pseudoElement
-Eigenschaft
Spezifikationen
Specification |
---|
CSS Pseudo-Elements Module Level 4 |
Siehe auch
- Spezifität
- CSS-Selektoren-Modul
- CSS Shadow-Parts-Modul
- CSS Generierter Inhalt-Modul
- CSS Positioniertes Layout-Modul
- CSS Custom Highlight API