:past CSS Pseudo Class

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The :past pseudo-class represents elements that occur before the current playback position in a time-based context, such as captions or cues associated with media playback. It’s primarily used with timed text tracks (for example, subtitles or captions) that are synchronized with media like video or audio. When the playhead moves forward, elements that have already elapsed become matched by :past.

In simple terms, :past lets you style content that has already happened in a media timeline.

What `:past` applies to

The :past pseudo-class is part of the same family as :current and :future. Together, they allow styling of timed content based on playback position:

:past → content that has already played
:current → content currently being played
:future → content that has not yet played

This is most commonly used with timed text rendered from a <track> element inside a media element such as <video>.

Example use case

Imagine a video with subtitles where you want previously spoken captions to appear dimmed, the current one highlighted, and upcoming ones hidden or softened.

<video controls>
  <source src="example.mp4" type="video/mp4">
  <track kind="subtitles" src="subs.vtt" srclang="en" default>
</video>

::cue(:past) {
  color: #999;
  opacity: 0.6;
}

::cue(:current) {
  color: #000;
  font-weight: bold;
}

::cue(:future) {
  opacity: 0.3;
}

In this example:

:past styles captions that have already been spoken.
:current highlights the active caption.
:future visually deemphasizes upcoming captions.

The styling uses standard CSS properties such as color and opacity.

Common use cases

Highlighting previously spoken dialogue in subtitles
Creating karaoke-style lyric progression
Visually tracking narration progress in educational videos

Important notes

:past only works in time-based contexts, typically with <track> elements inside a video element.
Support may vary between browsers, as timed-text styling is still a relatively niche feature.
It does not apply to normal DOM flow or static elements.

Syntax

:past {
  /* ... */
}

Example

HTML

<body>

  <video controls width="600">

    <source src="video-sample.mp4" type="video/mp4">

    <track default kind="subtitles" srclang="en" src="subtitles.vtt">

  </video>

</body>

CSS

/* Styling the overall cue (the subtitle text) */

video::cue {

  background-color: rgba(0, 0, 0, 0.8);

  color: white;

}



/* Styling the part of the text that is in the "past" 

   relative to the current playback time 

*/

video::cue(:past) {

  color: gray;

  text-decoration: line-through;

}



/* You can also style :future to highlight what 

   is coming up next in the current cue

*/

video::cue(:future) {

  color: yellow;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS :past pseudo class. Hover over a browser icon to see the version that first introduced support for this CSS psuedo class.