Pseudo-Elemente
Ein CSS Pseudo-Element ist ein Schlüsselwort, das einem Selektor hinzugefügt wird und es Ihnen ermöglicht, einen bestimmten Teil des ausgewählten Elements oder der 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 in ihrer Notation einen einzelnen Doppelpunkt (:) verwenden. Beachten Sie, dass Browser die Syntax mit einem Doppelpunkt 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 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 selektiert p:hover::first-line die erste Zeile (Pseudo-Element) eines Absatzes, wenn der Absatz selbst gehovt wird (Pseudo-Klasse).
Hinweis: Wenn eine Selektorenliste einen ungültigen Selektor enthält, wird der gesamte Stilblock ignoriert.
Typografische Pseudo-Elemente
::first-line-
Die erste Zeilenbox des ursprünglichen Elements.
::first-letter-
Der erste Buchstabe, die erste Zahl oder das erste Symbolzeichen in der ersten Zeile seines ursprünglichen Elements.
::cue-
Die WebVTT-Hinweise innerhalb eines ausgewählten Elements. Dies kann genutzt werden, um Untertitel und andere Hinweise zu gestalten in Medien mit VTT-Tracks. Das CSS Pseudo-Elemente-Modul definiert auch die
::postfixund::prefixSub-Pseudo-Elemente. Diese werden von keinem Browser bisher unterstützt.
Hervorhebungs-Pseudo-Elemente
Wählt Dokumentabschnitte basierend auf Inhalt und Dokumentstatus aus, wodurch diese Bereiche unterschiedlich gestaltet werden können, um diesen Status dem Benutzer anzuzeigen.
::selection-
Der Teil eines Dokuments, der ausgewählt wurde.
::target-text-
Das Zielelement des Dokuments. Das Zielelement wird mit dem Fragment-Identifikator der URL identifiziert.
::spelling-error-
Ein Abschnitt von Text, den der Browser als falsch geschrieben ansieht.
::grammar-error-
Ein Abschnitt von Text, den der Browser als grammatikalisch inkorrekt ansieht.
::highlight()-
Die Elemente im Hervorhebungsregister. Es wird verwendet, um benutzerdefinierte Hervorhebungen zu erstellen.
Baumkonforme Pseudo-Elemente
Diese Pseudo-Elemente verhalten sich wie reguläre Elemente und passen nahtlos in das Box-Modell. Sie agieren als Kindelemente, die direkt innerhalb der Hierarchie des ursprünglichen Elements gestaltet werden können.
::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 generierte Markerbox eines Listenelements.
::backdrop-
Der Hintergrund des ursprünglichen Elements, der in der obersten Ebene gerendert wird.
Element-unterstützte Pseudo-Elemente
Diese Pseudo-Elemente sind echte Elemente, die ansonsten nicht auswählbar sind.
::details-content-
Die ein- und ausklappbaren Inhalte eines
<details>-Elements. ::part()-
Jedes Element innerhalb eines Shadow-Trees, das ein passendes
part-Attribut hat. ::slotted()-
Jedes Element, das in einen Slot innerhalb eines HTML-Templates eingefügt wird.
Formularbezogene Pseudo-Elemente
Die Pseudo-Elemente beziehen sich auf Formularelemente.
::checkmark-
Ziel des Häkchens, das in das aktuell ausgewählte
<option>-Element eines anpassbaren Auswahl-Elements eingefügt wird, um einen visuellen Hinweis darauf zu geben, welches ausgewählt ist. -
Die Schaltfläche eines
<input>vontype="file". ::picker()-
Der Auswahlteil eines Elements, zum Beispiel der Dropdown-Auswahl eines anpassbaren Auswahl-Elements.
::picker-icon-
Das Auswahl-Symbol innerhalb von Formularelementen, die mit einem Symbol verknüpft sind. Im Fall eines anpassbaren Auswahl-Elements selektiert es den Pfeil, der nach unten zeigt, wenn die Auswahl geschlossen ist.
::placeholder-
Der Platzhaltertext in einem Eingabefeld.
Alphabetisches Register
Pseudo-Elemente, die von einer Reihe von CSS-Spezifikationen definiert werden, umfassen die folgenden:
A
B
C
::checkmark::cue(und::cue())
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 |