Pseudo-Elemente

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;
}

Doppelpunktpaare (::) werden für Pseudo-Elemente verwendet. Dies unterscheidet Pseudo-Elemente von Pseudo-Klassen, die in ihrer Notation einen einfachen Doppelpunkt (:) verwenden. Beachten Sie, dass Browser die Syntax mit einem einfachen 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 Teil ist, wird als sein ausgehendes Element bezeichnet. Ein Pseudo-Element muss nach allen anderen Komponenten im komplexen oder zusammengesetzten Selektor erscheinen. Das letzte Element im Selektor ist das ausgehende Element des Pseudo-Elements. Zum Beispiel können Sie die erste Zeile eines Absatzes mit p::first-line auswählen, jedoch nicht die Kinder der ersten Zeile. Daher ist p::first-line > * ungültig.

Ein Pseudo-Element kann basierend auf dem aktuellen Zustand des ausgehenden Elements ausgewählt werden. Zum Beispiel wählt p:hover::first-line die erste Zeile (Pseudo-Element) eines Absatzes aus, wenn der Absatz selbst ein Hovering-Effekt zeigt (Pseudo-Klasse).

Typografische Pseudo-Elemente

::first-line

Die erste Zeilen-Box des ausgehenden Elements.

::first-letter

Der erste Buchstabe, die erste Zahl oder das erste Symbolzeichen in der ersten Zeile seines ausgehenden Elements.

::cue

Die WebVTT Hinweise innerhalb eines ausgewählten Elements. Dies kann verwendet werden, um Untertitel und andere Hinweise zu stylen in Medien mit VTT-Tracks. Das CSS-Pseudo-Elemente Modul definiert auch die ::postfix und ::prefix Sub-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 stylen, um den Status dem Benutzer anzuzeigen.

::grammar-error

Ein Textteil, den der Browser für grammatikalisch falsch hält.

::highlight()

Die Elemente im Highlight-Register. Es wird verwendet, um benutzerdefinierte Hervorhebungen zu erstellen.

::search-text

Suchergebnisse, die vom "Find" oder "Find in page"-Textsuch-Feature des Benutzeragents identifiziert werden.

::selection

Der Teil eines Dokuments, der ausgewählt wurde.

::spelling-error

Ein Textteil, den der Browser für falsch geschrieben hält.

::target-text

Das Zielelement des Dokuments. Das Zielelement wird über den Fragment-Identifikator der URL identifiziert.

Baumkonforme Pseudo-Elemente

Diese Pseudo-Elemente verhalten sich wie normale Elemente und fügen sich nahtlos in das Boxmodell ein. Sie wirken wie ein Kindelement, das direkt innerhalb der Hierarchie des ausgehenden Elements gestylt 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.

::column

Jedes Spaltenfragment eines mehrspaltigen Layouts.

::marker

Die automatisch generierte Marker-Box eines Listenelements.

::backdrop

Der Hintergrund des ausgehenden Elements, der in der Top-Schicht gerendert wird.

::scroll-button()

Erstellt einen Button, der das Scrollen des Scrollcontainers, auf den es angewendet wird, steuern kann.

::scroll-marker

Erstellt ein Pseudo-Element, das ein Scroll-Marker ist — ein Scrollziel-Button für sein ausgehendes Element, das in einer Scroll-Marker-Gruppe verschachtelt ist.

::scroll-marker-group

Erzeugt einen Container vor oder nach einem Scroll-Container, um die auf dem Element oder seinen Nachkommen generierten ::scroll-marker Pseudo-Elemente aufzunehmen.

Auf Elementen basierende Pseudo-Elemente

Diese Pseudo-Elemente sind reale Elemente, die ansonsten nicht selektierbar sind.

::details-content

Der erweiterbare/kollabierbare Inhalt eines <details> Elements.

::part()

Jedes Element innerhalb eines Schattenbaums, das ein entsprechendes part Attribut hat.

::slotted()

Jedes Element, das in einen Slot innerhalb eines HTML-Templates platziert wurde.

Formularbezogene Pseudo-Elemente

Die Pseudo-Elemente beziehen sich auf Formularelemente.

::checkmark

Visiert das Häkchen innerhalb des aktuell ausgewählten <option> Elements eines anpassbaren Auswahl-Elements, um eine visuelle Anzeige, welches ausgewählt wurde, zu geben.

::file-selector-button

Der Button eines <input> vom type="file".

::picker()

Der Picker-Teil eines Elements, zum Beispiel der Drop-down-Picker eines anpassbaren Auswahl-Elements.

::picker-icon

Das Picker-Icon innerhalb von Formularsteuerelementen, die ein zugeordnetes Symbol haben. Im Fall eines anpassbaren Auswahl-Elements wählt es den Pfeil aus, der nach unten zeigt, wenn das Auswahlfeld geschlossen ist.

::placeholder

Der Platzhaltertext in einem Eingabefeld.

Alphabetischer Index

Durch eine Reihe von CSS-Spezifikationen definierte Pseudo-Elemente umfassen die folgenden:

A

• ::after

B

• ::backdrop
• ::before

C

• ::column
• ::checkmark
• ::cue (und ::cue())

D

• ::details-content

F

• ::file-selector-button
• ::first-letter
• ::first-line

G

• ::grammar-error

H

• ::highlight()

M

• ::marker

P

• ::part()
• ::picker()
• ::picker-icon
• ::placeholder

S

• ::scroll-button()
• ::scroll-marker
• ::scroll-marker-group
• ::selection
• ::slotted()
• ::spelling-error

T

• ::target-text

V

• ::view-transition
• ::view-transition-image-pair()
• ::view-transition-group()
• ::view-transition-new()
• ::view-transition-old()

Nicht-standardisierte Pseudo-Elemente

Nicht-standardisierte, vendor-spezifische Pseudo-Elemente umfassen:

-moz- Präfix

• ::-moz-color-swatch
• ::-moz-focus-inner
• ::-moz-list-bullet
• ::-moz-list-number
• ::-moz-meter-bar
• ::-moz-progress-bar
• ::-moz-range-progress
• ::-moz-range-thumb
• ::-moz-range-track

-webkit- Präfix

• ::-webkit-inner-spin-button
• ::-webkit-meter-bar
• ::-webkit-meter-even-less-good-value
• ::-webkit-meter-inner-element
• ::-webkit-meter-optimum-value
• ::-webkit-meter-suboptimum-value
• ::-webkit-progress-bar
• ::-webkit-progress-inner-element
• ::-webkit-progress-value
• ::-webkit-scrollbar
• ::-webkit-search-cancel-button
• ::-webkit-search-results-button
• ::-webkit-slider-runnable-track
• ::-webkit-slider-thumb

Verschachtelung von Pseudo-Elementen

Sie können einige Pseudo-Element-Selektoren miteinander verketten, um verschachtelte Pseudo-Elemente innerhalb anderer Pseudo-Elemente zu stylen. Die folgenden verschachtelten Pseudo-Element-Kombinationen werden unterstützt:

• ::after
  • ::after::marker: Wählt das ::marker Pseudo-Element eines ::after Pseudo-Elements aus, wenn ::after als Listenelement mit display: list-item gestylt ist.
• ::before
  • ::before::marker: Wählt das ::marker Pseudo-Element eines ::before Pseudo-Elements aus, wenn ::before als Listenelement mit display: list-item gestylt ist.

Schauen Sie sich die einzelnen Referenzseiten zu den Pseudo-Elementen für Beispiele und Informationen zur Browser-Kompatibilität an.

Highlight-Pseudo-Elemente Vererbung

Highlight-Pseudo-Elemente wie ::selection, ::target-text, ::highlight(), ::spelling-error und ::grammar-error folgen einem konsistenten Vererbungsmodell, das sich von der regulären Elementvererbung unterscheidet.

Wenn Sie Styles auf Highlight-Pseudo-Elemente anwenden, erben sie sowohl von:

1. Ihren Elternelementen (gemäß normaler Vererbung).
2. Den Highlight-Pseudo-Elementen ihrer Elternelemente (gemäß Highlight-Vererbung).

Das bedeutet, dass, wenn Sie sowohl das Highlight-Pseudo-Element eines Elternelements als auch das eines Kindelements stylen, der hervorgehobene Text des Kindes Eigenschaften aus beiden Quellen kombiniert.

Hier ist ein konkretes Beispiel.

Zuerst haben wir etwas HTML, das zwei verschachtelte <div> Elemente enthält. Ein Teil des enthaltenen Textes befindet sich direkt im übergeordneten <div>, und ein Teil ist im untergeordneten <div> verschachtelt.

<div class="parent">
  Parent text
  <div class="child">Child text</div>
</div>

Als Nächstes fügen wir etwas CSS hinzu, das die Elternelemente und Kind-<div>-Elemente separat auswählt und ihnen unterschiedliche color Werte verleiht, sowie den Text des Elternteils und Kindes auswählt (::selection). Dies gibt jedem <div> eine andere background-color und setzt eine andere Textfarbe für die Auswahl des Elternteils fest.

/* Style for the parent element */
.parent {
  color: blue;
}

/* Style for the parent's selected text */
.parent::selection {
  background-color: yellow;
  color: red;
}

/* Style for the child element */
.child {
  color: green;
}

/* Style for the child's selected text */
.child::selection {
  background-color: orange;
}

Das Beispiel wird wie folgt gerendert:

Versuchen Sie, den Text in beiden Elementen auszuwählen. Beachten Sie, dass:

1. Wenn Sie den Text des Elternteils auswählen, verwendet er den gelben Hintergrund und die rote Textfarbe, die in .parent::selection definiert sind.
2. Wenn Sie den Text des Kindes auswählen, verwendet er:
   • Den orangefarbenen Hintergrund aus .child::selection.
   • Die rote Textfarbe, die vom ::selection Pseudo-Element des Elternteils geerbt wird.

Dies zeigt, wie das Highlight-Pseudo-Element des Kindes sowohl von seinem übergeordneten Element als auch vom Highlight-Pseudo-Element des Elternteils erbt.

CSS-Benutzerdefinierte Eigenschaften (Variablen) in Highlight-Pseudo-Elementen erben von ihrem Ursprünglichen Element (dem Element, auf das sie angewendet werden), nicht durch die Highlight-Vererbungskette. Zum Beispiel:

:root {
  --selection-color: lightgreen;
}

::selection {
  color: var(--selection-color);
}

.blue {
  --selection-color: blue;
}

Die Verwendung des universellen Selektors mit Highlight-Pseudo-Elementen verhindert die Highlighter-Vererbung. Zum Beispiel:

/* This prevents highlight inheritance */
*::selection {
  color: lightgreen;
}

/* Prefer this to allow inheritance */
:root::selection {
  color: lightgreen;
}

Spezifikationen

Siehe auch

• CSS-Pseudo-Elemente Modul
• Pseudo-Klassen
• CSS-Selektoren Modul
• Lernen: Pseudo-Klassen und Pseudo-Elemente
• Änderungen bei der Vererbung für CSS-Auswahlstyling - Detaillierte Erklärung der Änderungen im Highlight-Pseudo-Elemente-Vererbungsmodell in Chrome 134