Pseudo-Elemente
Ein CSS Pseudo-Element ist ein Schlüsselwort, das zu einem Selektor hinzugefügt wird, um einen bestimmten Teil des ausgewählten Elements bzw. der ausgewählten Elemente zu gestalten.
Syntax
selector::pseudo-element {
property: value;
}
Zum Beispiel kann ::first-line verwendet werden, um die Schriftart der ersten Zeile eines Absatzes zu ändern.
/* The first line of every <p> element. */
p::first-line {
color: blue;
text-transform: uppercase;
}
Doppelte Doppelpunkte (::) werden für Pseudo-Elemente verwendet. Dies unterscheidet Pseudo-Elemente von Pseudo-Klassen, die einen einzelnen Doppelpunkt (:) in ihrer Notation verwenden. Beachten Sie, dass Browser die Einzelsyntax für die ursprünglichen vier Pseudo-Elemente unterstützen: ::before, ::after, ::first-line und ::first-letter.
Pseudo-Elemente existieren nicht unabhängig. Das Element, von dem ein Pseudo-Element ein Teil ist, wird als dessen ursprüngliches Element bezeichnet. Ein Pseudo-Element muss nach allen anderen Komponenten im komplexen oder zusammengesetzten Selektor erscheinen. Das letzte Element im Selektor ist das ursprüngliche Element des Pseudo-Elements. Zum Beispiel können Sie die erste Zeile eines Absatzes mit p::first-line auswählen, aber nicht die Kinder der ersten Zeile. Daher ist p::first-line > * ungültig.
Ein Pseudo-Element kann basierend auf dem aktuellen Zustand des ursprünglichen Elements ausgewählt werden. Zum Beispiel wählt p:hover::first-line die erste Zeile (Pseudo-Element) eines Absatzes aus, wenn der Absatz selbst gerade die Pseudo-Klasse :hover hat.
Hinweis: Wenn eine Selektorliste einen ungültigen Selektor enthält, wird der gesamte Stilblock ignoriert.
Typografische Pseudo-Elemente
::first-line-
Die erste Zeilen-Box des ursprünglichen Elements.
::first-letter-
Der erste Buchstabe, die erste Zahl oder das erste Symbolzeichen auf der ersten Zeile seines ursprünglichen Elements.
::cue-
Die WebVTT Cues innerhalb eines ausgewählten Elements. Dies kann verwendet werden, um Untertitel und andere Cues in Medien mit VTT-Tracks zu gestalten. Das CSS Pseudo-Elemente Modul definiert auch die
::postfixund::prefixSub-Pseudo-Elemente. Diese werden von keinem Browser unterstützt.
Highlight-Pseudo-Elemente
Wählt Dokumentabschnitte basierend auf Inhalt und Dokumentstatus aus und ermöglicht es, diese Bereiche unterschiedlich zu gestalten, um diesen Status dem Benutzer anzuzeigen.
::selection-
Der Teil eines Dokuments, der ausgewählt wurde.
::target-text-
Das Zielelement des Dokuments. Das Zielelement wird mithilfe der Fragmentkennung der URL identifiziert.
::spelling-error-
Ein Textabschnitt, der vom Browser als falsch geschrieben angesehen wird.
::grammar-error-
Ein Textabschnitt, der vom Browser als grammatikalisch inkorrekt angesehen wird.
::highlight()-
Die Elemente im Highlight-Register. Es wird verwendet, um benutzerdefinierte Highlights zu erstellen.
Baumkonforme Pseudo-Elemente
Diese Pseudo-Elemente verhalten sich wie reguläre Elemente und fügen sich nahtlos in das Box-Modell ein. Sie agieren als Kindelement, das direkt innerhalb der Hierarchie des ursprünglichen Elements gestaltet werden kann.
::before-
Erstellt ein Pseudo-Element, das das erste Kind des ausgewählten Elements ist.
::after-
Erstellt ein Pseudo-Element, das das letzte Kind des ausgewählten Elements ist.
::marker-
Die automatisch erzeugte Markierungsbox eines Listenelements.
::placeholder-
Der Platzhaltertext in einem Eingabefeld.
::backdrop-
Der Hintergrund des ursprünglich renderten Elements in der obersten Ebene.
Elemente-gebundene Pseudo-Elemente
Diese Pseudo-Elemente sind tatsächliche Elemente, die sonst nicht auswählbar sind.
::details-content-
Der erweiterbare/zusammenklappbare Inhalt eines
<details>Elements. -
Die Schaltfläche eines
<input>vontype="file". ::part()-
Jedes Element innerhalb eines Shadow-Trees, das ein passendes
partAttribut trägt. ::slotted()-
Jedes Element, das in einen Slot innerhalb einer HTML-Vorlage eingefügt wurde.
Alphabetisches Verzeichnis
Pseudo-Elemente, die durch eine Reihe von CSS-Spezifikationen definiert sind, umfassen die folgenden:
A
B
C
D
F
G
H
M
P
S
T
V
Spezifikationen
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 |
| CSS Positioned Layout Module Level 4 |
| CSS Shadow Parts |
| WebVTT: The Web Video Text Tracks Format |