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

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 einzelnen 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 sein 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 gehovt wird (Pseudo-Klasse).

Die Spezifikationen erlauben es, dass einige Pseudo-Elemente basierend auf dem aktuellen Zustand des ursprünglichen Elements ausgewählt werden können. In diesen Fällen wird das Pseudo-Element nur ausgewählt, wenn es sich im selben Zustand befindet. Zum Beispiel wählt ::picker(select):hover den aktuell gehovten Nachfahren eines anpassbaren <select>-Elements aus, mit Ausnahme des ersten <button>-Kindes, das nicht vom ::picker()-Pseudo-Element ausgewählt wird. Beachten Sie jedoch, dass, wenn eine Selektor-Liste einen ungültigen Selektor enthält, der gesamte Stilblock ignoriert wird, daher stellen Sie sicher, dass der Zustand, den Sie einschließen, vom Pseudo-Element unterstützt wird, an das er angefügt ist.

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 verwendet werden, um Untertitel und andere Hinweise zu stylen in Medien mit VTT-Spuren zu gestalten. Das CSS Pseudo-Elemente-Modul definiert auch die ::postfix und ::prefix Sub-Pseudo-Elemente. Diese werden noch von keinem Browser unterstützt.

Highlight-Pseudo-Elemente

Wählt Dokumentabschnitte basierend auf Inhalt und Dokumentstatus aus, um diese Bereiche unterschiedlich zu gestalten und diesen Status dem Benutzer anzuzeigen.

::grammar-error

Ein Textabschnitt, den der Browser für grammatisch inkorrekt hält.

::highlight()

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

::search-text

Suchergebnisse, die durch die Textsuchfunktion "Suchen" oder "Seite durchsuchen" des Benutzers identifiziert werden.

::selection

Der Teil eines Dokuments, der ausgewählt wurde.

::spelling-error

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

::target-text

Das Ziel-Element des Dokuments. Das Ziel-Element wird durch den Fragment-Identifikator der URL identifiziert.

Baum-Konforme Pseudo-Elemente

Diese Pseudo-Elemente verhalten sich wie gewöhnliche Elemente und fügen sich nahtlos in das Boxmodell ein. Sie fungieren als Kind-Element, 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.

::column

Jedes Spaltenfragment eines Mehrspaltenlayouts.

::marker

Der automatisch generierte Marker-Box eines Listenelements.

::backdrop

Die Kulisse des ursprünglichen Elements, die in der obersten Schicht gerendert wird.

::scroll-button()

Erstellt eine Schaltfläche, die das Scrollen des Scroll-Containers steuern kann, auf den es angewendet wird.

::scroll-marker

Erstellt ein Pseudo-Element, das ein Scroll-Marker ist — eine Scroll-Ziel-Schaltfläche für sein ursprüngliches Element, das in einer Scroll-Marker-Gruppe verschachtelt ist.

::scroll-marker-group

Erzeugt einen Container vor oder nach einem Scroll-Container, um die ::scroll-marker-Pseudo-Elemente zu enthalten, die auf dem Element oder seinen Nachkommen generiert werden.

Element-gestützte Pseudo-Elemente

Diese Pseudo-Elemente sind reale Elemente, die anderweitig nicht auswählbar sind.

::details-content

Der erweiterbare/zusammenklappbare Inhalt eines <details>-Elements.

::part()

Jedes Element innerhalb eines Schattenbaums, das ein übereinstimmendes part-Attribut hat.

::slotted()

Jedes Element, das in einen Slot innerhalb einer HTML-Vorlage eingesetzt wurde.

Formularbezogene Pseudo-Elemente

Die Pseudo-Elemente sind auf Formularelemente bezogen.

::checkmark

Zielt auf das Häkchen, das sich im derzeit ausgewählten <option>-Element eines anpassbaren select-Elements befindet, um einen visuellen Hinweis darauf zu geben, welches ausgewählt ist.

::file-selector-button

Die Schaltfläche eines <input> des type="file".

::picker()

Der Picker-Teil eines Elements, zum Beispiel der Dropdown-Picker eines anpassbaren select-Elements.

::picker-icon

Das Picker-Symbol innerhalb von Formularelementen, die ein zugehöriges Symbol haben. Im Fall eines anpassbaren select-Elements wählt es den Pfeil aus, der nach unten zeigt, wenn der Select geschlossen ist.

::placeholder

Der Platzhaltertext in einem Eingabefeld.

Alphabetischer Index

Die durch eine Reihe von CSS-Spezifikationen definierten Pseudo-Elemente umfassen Folgendes:

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 pseudo-elemente, die durch einen Anbieter-Präfix unterstützt werden, beinhalten:

-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.

Sehen Sie sich die einzelnen Referenzseiten für Pseudo-Elemente für Beispiele und Informationen zur Browser-Kompatibilität an.

Hervorhebung von Pseudo-Elementen 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 Stile auf Highlight-Pseudo-Elemente anwenden, erben sie sowohl von:

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

Dies bedeutet, dass wenn Sie sowohl ein Highlight-Pseudo-Element eines Elternelements als auch eines Kind-Elements 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 Textinhalts 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 übergeordneten und untergeordneten <div>-Elemente separat auswählt und ihnen unterschiedliche color-Werte zuweist, und das ausgewählte Text des Eltern- und Kind-Elements (::selection). Dies gibt jedem <div> eine andere background-color und setzt eine andere Textfarbe auf die Eltern-Auswahl.

/* 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 dargestellt:

Versuchen Sie, den Text sowohl in den übergeordneten als auch in den untergeordneten Elementen auszuwählen. Beachten Sie, dass:

1. Wenn Sie den Elterntext auswählen, wird der gelbe Hintergrund und die rote Textfarbe verwendet, die in .parent::selection definiert sind.
2. Wenn Sie den Kindertext auswählen, wird verwendet:
   • Der orangefarbene Hintergrund von .child::selection.
   • Die rote Textfarbe, die vom ::selection-Pseudo-Element des Elternteils geerbt wird.

Dies demonstriert, wie das Highlight-Pseudo-Element des Kindes sowohl vom Elternelement 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;
}

Wenn Sie den universellen Selektor mit Highlight-Pseudo-Elementen verwenden, verhindert er die Highlight-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
• Vererbungsänderungen für das CSS-Selektionsstyling - Detaillierte Erklärung der Änderungen im Vererbungsmodell für Highlight-Pseudo-Elemente in Chrome 134