:current | CSS-Tricks

Geoff Graham on Feb 23, 2021 (Updated on Aug 27, 2021)

:current is a CSS pseudo-selector that matches an element or an ancestor of an element that’s currently in display. So, we can match items that have rendered on the screen like this:

:current(p, ul);

…and that will select all currently displayed paragraphs and unordered lists. It’s a lot like is() in that sense. But what makes this pseudo-selector super cool is that it’s part of what the CSS Selectors Level 4 specification calls “time dimensional” pseudo-classes which are designed to match elements along a timeline, such as subtitles in a video.

Meet WebVTT

That’s what’s used to render subtitles in a video. And it does that by defining a timeline that pairs subtitles with time ranges so they align with the speech that’s playing.

WEBVTT

00:00:00.000 --> 00:00:03.000
- [Birds chirping]
- It's a beautiful day!

00:00:04.000 --> 00:00:07.000
- [Creek trickling]
- It is indeed!

00:00:08.000 --> 00:00:10.000
- Hello there!

As the video plays, WebVTT is running alongside it, displaying the subtitles that are defined within the time ranges. That means there’s a time dimension where we have past, current, and future states for the subtitles. After a subtitle finishes playing, it becomes part of the past. Upcoming subtitles? Yep, they’re in the future.

Khari McMillian published a super thorough post on WebVTT, including how to format it for the best accessibility.

But what we care about are the ones that are currently playing. That’s what :current selects. It’s worth noting here that a WebVTT files without a timeline cannot be styled by these time-dimensional pseudos.

`:current` selects the subtitle that is currently being displayed

That’s right, as simple as that. We might want to punch up the style for subtitles that are on display so they stand out from past and future subtitles.

video:current {
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-weight: 800;
  padding: 1rem;
}

Example

Given some sort of <video> in HTML:

<video controls>
  <source src="/awesome-video.mp4" type="video/mp4"/>
  <track id="caption-track" kind="subtitles" srclang="en" label="English" default/>
</video>

…and a WebVTT file that defines subtitles along a timeline:

WEBVTT

1
00:00:00.000 --> 00:00:03.000
<i>This is a WebVTT demo.</i>

2
00:00:03.000 --> 00:00:06.000
<b>WebVTT supports many different kinds of formatting.</b>

3
00:00:06.000 --> 00:00:09.000
The text can be normal, like this.

4
00:00:09.000 --> 00:00:12.000 vertical:lr
Or vertical.

5
00:00:12.000 --> 00:00:15.000 line:100%
You can move it vertically.

6
00:00:15.000 --> 00:00:18.000 vertical:rl line:0
Or horizontally.

7
00:00:18.000 --> 00:00:21.000
You can even colorize captions.

8
00:00:21.000 --> 00:00:24.000 size:20
Or change its size.

9
00:00:24.000 --> 00:00:27.000
<ruby>Ruby text is supported as well.<rt>This text will be above the other text.

10
00:00:27.000 --> 00:00:30.000 size:40%
Size can be adjusted as well.

…we can style the paragraphs of a subtitle that is currently being displayed:

video:current(p) {
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-weight: 800;
  padding: 1rem;
}

Browser support

This is all very conceptual at the moment. The spec itself is in Working Draft status. That means :current has been defined, but there’s very little support for it and what we have now is subject to change by the time it becomes a recommendation candidate.