:current CSS-Pseudoklasse
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Der :current-Pseudoklassen-Selektor in CSS repräsentiert ein Element oder den Vorfahren eines Elements, das gerade angezeigt oder hervorgehoben wird.
Syntax
:current {
/* ... */
}
:current(<compound-selector-list>) {
/* ... */
}
Beschreibung
Die Pseudoklasse :current wird verwendet, um das „derzeit angezeigte“ Element aus einer Reihe von Elementen auszuwählen.
„Derzeit“ kann sich dabei auf einen Zeitpunkt beziehen: Mit :current lassen sich die gerade angezeigten Bildunterschriften oder Untertitel auswählen, die einem abgespielten Video zugeordnet sind und durch WebVTT repräsentiert werden.
Es kann sich auch auf das gerade hervorgehobene Element innerhalb 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 durch die Suchergebnisse im gerenderten 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 Ihres 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 mit :current zu sehen.
Gerade angezeigte WebVTT-Untertitel gestalten
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>
CSS
:current(p, span) {
background-color: yellow;
}
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