:past | CSS-Tricks - CSS-Tricks

:past is a CSS pseudo-selector that matches elements that have passed along a timeline. Where you’ll see this come into play is largely with video subtitles created with WebVTT. When a subtitle is no longer the currently displayed text, it becomes a part of the past as far as the timeline is concerned, and :past allows us to match and style it accordingly.

:past(p) {
  opacity: .5;
}

This is part of what the CSS Selectors Level 4 specification calls “time dimensional” pseudo-classes, which is currently in Working Draft status. That means the specification is in progress and could change between now and when it becomes a candidate recommendation.

WebVTT crash course

WebVTT is a format for creating subtitles, plotting them along a timeline with time ranges that define when each subtitle is displayed. This allows us to align subtitles with speech from media playback, such as videos.

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. That’s how this all relates to the :past pseudo-element in CSS.

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

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 subtitles that precede the one currently being displayed:

video:past(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 :past 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.