Limited supportLimited browser support. Check compatibility before use.
Selectors Limited support

Time-relative pseudo-selectors

The :past and :future CSS pseudo-classes match prior or upcoming text track cues during media playback.

Selectors

Overview

The :past and :future CSS pseudo-classes match prior or upcoming text track cues during media playback.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:future
23
79
7
25
7
Other
css.selectors.past

`:past`
23
79
7
25
7
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
::cue:past {
  color: gray;
  opacity: 0.5;
}
::cue:future {
  color: white;
}

Live demo

past(:past)

CSS past(:past) demo.

PreviewFullscreen

current(:current)

CSS current(:current) demo.

PreviewFullscreen

future(:future)

CSS future(:future) demo.

PreviewFullscreen

Use cases

  • Using Time-relative pseudo-selectors

    The :past and :future CSS pseudo-classes match prior or upcoming text track cues during media playback.

Cautions

  • Limited browser support. Check compatibility before use.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features