CSS-Pseudoklasse :current
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Der CSS-Pseudoklassenselektor :current repräsentiert ein Element oder ein übergeordnetes Element eines Elements, das gerade angezeigt oder hervorgehoben wird.
Syntax
:current {
/* ... */
}
:current(<compound-selector-list>) {
/* ... */
}
Beschreibung
Die Pseudoklasse :current wird verwendet, um das „gerade angezeigte“ Element aus einer Reihe von Elementen auszuwählen.
„Aktuell“ kann sich dabei auf die Zeit beziehen: Mit :current lassen sich die gerade angezeigten Untertitel (dargestellt mit WebVTT) eines abgespielten Videos auswählen.
Die Pseudoklasse kann sich auch auf das gerade hervorgehobene Element einer Reihe beziehen. Beispielsweise lässt sich :current mit dem Pseudoelement ::search-text kombinieren, um das aktuell ausgewählte Suchergebnis der Browserfunktion „Auf Seite suchen“ gezielt zu gestalten.
Zum Beispiel:
p::search-text {
color: white;
background-color: purple;
}
p::search-text:current {
background-color: crimson;
}
Beispiele
Benutzerdefinierte Stile für Textsuchergebnisse
Dieses Beispiel zeigt, wie Sie mit ::search-text und :current benutzerdefinierte Stile für die Suchergebnisse der Browserfunktion „Auf Seite suchen“ erstellen.
HTML
Das HTML besteht aus einem einfachen Textabsatz. Der HTML-Quelltext wird hier nicht gezeigt, um das Beispiel kurz zu halten und die Navigation zwischen den Suchergebnissen im dargestellten Beispiel zu erleichtern.
CSS
In unserem CSS gestalten wir zunächst das Pseudoelement ::search-text. Wir geben ihm benutzerdefinierte Stile für background-color, color und text-shadow.
::search-text {
background-color: purple;
color: white;
text-shadow: 1px 1px 1px black;
}
Abschließend gestalten wir mit ::search-text:current das aktuell ausgewählte Suchergebnis. Es erhält eine andere background-color und einige Stile für text-decoration, damit es sich von den übrigen Ergebnissen unterscheidet.
::search-text:current {
background-color: crimson;
text-decoration-line: underline;
text-decoration-color: yellow;
text-decoration-thickness: 3px;
}
Ergebnis
Das Beispiel wird wie folgt dargestellt:
Verwenden Sie die Suchfunktion des Browsers, um ein Wort zu finden, das im Beispieltext mehrfach vorkommt, etwa „aliquam“, „amet“ oder „tortor“. Wechseln Sie zwischen den vorherigen und nächsten Ergebnissen, um die Gestaltung durch :current zu sehen.
Gerade angezeigte WebVTT-Untertitel gestalten
CSS
:current(p, span) {
background-color: yellow;
}
HTML
<video controls preload="metadata">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<track
label="English"
kind="subtitles"
srclang="en"
src="subtitles.vtt"
default />
</video>
WebVTT
WEBVTT FILE 1 00:00:03.500 --> 00:00:05.000 This is the first caption 2 00:00:06.000 --> 00:00:09.000 This is the second caption 3 00:00:11.000 --> 00:00:19.000 This is the third caption