CSS :future Pseudo-Class

CSS :future Pseudo-Class

The CSS :future pseudo-class selects timed elements that occur after the current playback position. It is designed for time-based content, such as WebVTT captions and subtitles, allowing upcoming text to be styled differently from currently active or previously displayed content.

:future Syntax

:future {
  property: value;
}

The :future pseudo-class does not accept arguments. It matches elements classified as future content within a time-dimensional presentation.

Example Syntax

:future {
  color: #999;
}

This rule specifies a gray text color for elements that match :future in a supported timed-content environment.

Combining with Other Selectors

::cue(:future) {
  color: #999;
}

This example demonstrates the intended use of :future with timed text cues. Actual rendering depends on browser support for the selector and cue styling.

The :future pseudo-class has a specificity of 0-1-0. When used as an argument to ::cue(), the matching behavior and applicable styling are subject to the rules for WebVTT cue selectors.

How :future Works

The :future pseudo-class is part of the time-dimensional pseudo-classes defined in CSS Selectors Level 4.

These selectors describe elements according to their position relative to the current time in a time-based presentation.

Time-Based Matching

An element matches :future when it is associated with a time interval that occurs after the current presentation position.

Playback Position

The current playback position determines whether timed content is considered past, current, or future. As playback progresses, the classification of content can change.

Not a General Document Selector

The :future pseudo-class does not select ordinary HTML elements based on their position in the document or whether they will become visible later during scrolling.

For example, an element placed farther down a webpage does not match :future simply because a user has not scrolled to it.

Timed Text and WebVTT

WebVTT (Web Video Text Tracks) is a format used to provide captions, subtitles, and other timed text associated with video or audio.

WebVTT cues contain timestamps that determine when their text is presented during media playback.

WebVTT Example

WEBVTT

00:00:01.000 --> 00:00:04.000
Welcome to the CSS tutorial.

00:00:04.000 --> 00:00:07.000
This is the second caption.

00:00:07.000 --> 00:00:10.000
This caption appears later.

At a playback position of five seconds, the first cue has ended, the second cue is active, and the third cue has not started.

HTML Video Element

<video controls width="300">
  <source src="tutorial.mp4" type="video/mp4">
  <track src="captions.vtt" kind="captions" srclang="en" label="English" default>
</video>

The <track> element associates the WebVTT captions with the video. The :future pseudo-class is intended to identify future timed content where supported.

Cue Timing

WebVTT cues become active according to their start and end timestamps. However, whether a browser exposes future cue content for CSS styling is a separate implementation consideration.

:future vs. :current and :past

CSS Selectors Level 4 defines three related time-dimensional pseudo-classes.

Comparison

Conceptual Styling

:past {
  color: #777;
}
:current {
  color: #000;
  font-weight: bold;
}
:future {
  color: #999;
}

These rules illustrate how past, current, and future timed elements could receive different visual styles in an environment implementing the selectors.

The rules do not make ordinary HTML elements automatically behave as timed content.

:future Matching Behavior

Matching depends on whether the document or presentation environment defines a time relationship for the elements.

Matching Conditions

Changing Playback Position

Seeking forward or backward through timed media changes which content is considered past, current, or future.

Selector Support

A browser that does not implement :future will not apply styles based on the selector. The absence of a visual change should not be treated as evidence that cue timing is incorrect.

Styling Timed Text Cues

The ::cue pseudo-element allows supported CSS properties to style WebVTT cue text.

Standard Cue Styling

video::cue {
  color: #fff;
  background-color: #000;
}

This example styles displayed caption text using the broadly supported ::cue pseudo-element.

Future Cue Styling

video::cue(:future) {
  color: #aaa;
}

This rule illustrates a possible selector for future cue content. It should not be relied upon for production caption styling because support for :future is limited.

Styling Limitations

WebVTT cue styling supports only a restricted set of CSS properties. Normal webpage layout properties do not necessarily apply to cue text.

Future cues are not normally displayed before their scheduled time, so styling them may produce no visible result even in environments that understand the selector.

Limitations

The :future pseudo-class is a specialized selector and is not suitable for general webpage state management.

Limited Browser Support

Browser implementation of time-dimensional pseudo-classes remains limited. Do not depend on :future for essential interface behavior.

No Automatic Scheduling

The selector does not create timestamps, schedule content, or advance elements through timed states. Those behaviors must be provided by the presentation environment.

Not for Upcoming Events

The selector does not automatically match future calendar events, upcoming tasks, or content scheduled for later publication.

JavaScript Alternatives

For ordinary HTML interfaces that need to distinguish upcoming items, JavaScript can update classes based on application data or time.

const item = document.querySelector(".schedule-item");
item.classList.add("upcoming");

.schedule-item.upcoming {
  color: #666;
}

This approach explicitly applies a class instead of relying on the specialized :future pseudo-class.

Accessibility

Timed text should remain readable and synchronized with the associated media. CSS styling should not interfere with captions or subtitles that users depend on.

Readable Captions

Use sufficient contrast between caption text and its background. Avoid styles that make text difficult to read.

Avoid Color-Only Meaning

Do not rely exclusively on color to communicate whether content is past, current, or future.

Preserving Caption Timing

Ensure that visual styling does not obscure or distract from the actual caption text and its intended timing.

Best Practices

• Use :future only in environments that define time-dimensional content.
• Do not use it as a replacement for JavaScript-based scheduling or application state.
• Check browser support before relying on the selector.
• Use broadly supported ::cue styling for standard captions.
• Keep timed text readable and accessible.
• Test actual playback behavior rather than assuming that future cues will be visible.
• Provide a fallback when specialized time-dimensional selectors are unsupported.

:future Example

This example demonstrates the concept of past, current, and future timed content using JavaScript. It does not depend on browser support for the CSS :future pseudo-class.

Select Play, Pause, or Reset to see the simulated playback position change. The upcoming items receive the .future class, which demonstrates the intended appearance of future timed content.

HTML

<div class="timeline-demo">
  <div class="timeline-item" data-start="0">Introduction</div>
  <div class="timeline-item" data-start="3">CSS Selectors</div>
  <div class="timeline-item" data-start="6">Pseudo-Classes</div>
  <div class="timeline-item" data-start="9">Summary</div>
  <p id="playback-time">Time: 0 seconds</p>
  <button type="button" id="play-timeline">Play</button>
  <button type="button" id="pause-timeline">Pause</button>
  <button type="button" id="reset-timeline">Reset</button>
</div>

CSS

.timeline-demo .timeline-item {
  padding: 8px;
  margin-bottom: 6px;
  border: 1px solid #ccc;
}
.timeline-demo .timeline-item.past {
  color: #777;
  background-color: #f2f2f2;
}
.timeline-demo .timeline-item.current {
  color: #003366;
  background-color: #d9efff;
  border-color: #0088cc;
  font-weight: bold;
}
.timeline-demo .timeline-item.future {
  color: #666;
  background-color: #fff;
}
.timeline-demo button {
  padding: 6px 10px;
  margin: 4px 4px 0 0;
  cursor: pointer;
}

JavaScript

const items = document.querySelectorAll(".timeline-item");
const timeDisplay = document.getElementById("playback-time");
let seconds = 0;
let timer = null;

function updateTimeline() {
  items.forEach((item, index) => {
    const start = Number(item.dataset.start);
    const next = items[index + 1];
    const end = next ? Number(next.dataset.start) : 12;
    item.classList.remove("past", "current", "future");
    if (seconds < start) {
      item.classList.add("future");
    } else if (seconds >= end) {
      item.classList.add("past");
    } else {
      item.classList.add("current");
    }
  });
  timeDisplay.textContent = `Time: ${seconds} seconds`;
}

document.getElementById("play-timeline").addEventListener("click", () => {
  if (timer) return;
  timer = setInterval(() => {
    seconds++;
    if (seconds >= 12) {
      clearInterval(timer);
      timer = null;
    }
    updateTimeline();
  }, 1000);
});

document.getElementById("pause-timeline").addEventListener("click", () => {
  clearInterval(timer);
  timer = null;
});

document.getElementById("reset-timeline").addEventListener("click", () => {
  clearInterval(timer);
  timer = null;
  seconds = 0;
  updateTimeline();
});

updateTimeline();

Browser Result

Play in Editor

Note: This is a JavaScript simulation of timed states, not a live demonstration of the CSS :future pseudo-class. It uses the classes .past, .current, and .future for predictable browser behavior.

Browser Support

Baseline: Limited availability. The :future pseudo-class is not consistently supported across major browsers. Its use for timed media and WebVTT cues remains limited.

For current compatibility information, visit Can I Use? and search for :future.

Specifications

The :future pseudo-class is defined in CSS Selectors Level 4 as part of the time-dimensional pseudo-classes, alongside :current and :past.

Selectors Level 4 - Time-Dimensional Pseudo-Classes