:future CSS Pseudo Class

The :future pseudo-class is a time-based CSS selector intended to match elements whose associated time is in the future relative to the current playback position of a time-based media element (such as audio, video, or timed text). It is part of the Selectors Level 4 draft and is primarily designed for temporal documents, such as captions, subtitles, or synchronized media presentations.

At the moment, :future is not widely implemented in browsers, so it is mostly useful for conceptual understanding, specifications, and experimental environments rather than production use.

What :future Targets

The :future pseudo-class selects elements that are scheduled to appear later in time, meaning their associated time interval has not yet begun.

It is commonly discussed alongside :past, which targets content that has already occurred.

Typical use cases include:

• Styling upcoming captions or subtitles
• Highlighting upcoming cues in timed text
• Visually distinguishing future steps in a time-based presentation

Example Concept

Imagine a timed transcript synced with a video:

<p class="cue">Hello and welcome.</p>
<p class="cue">Today we’ll learn about CSS.</p>
<p class="cue">Let’s begin.</p>

In a theoretical time-based environment, CSS like this could apply:

.cue:future {
  opacity: 0.4;
}

This would visually fade any cue that has not yet occurred.

Relationship to Other Pseudo-Classes

• :past - targets content whose time has already passed.
• :current - represents content that is active right now (this is the “current” pseudo-class, as requested).

These three are often described as a temporal trio:

• past → current → future

Typical Use with Media Elements

The :future pseudo-class is most relevant when used alongside timed media such as:

• video
• audio

For example, a browser or media engine could theoretically style upcoming captions differently before they appear onscreen.