CSS :past Pseudo-Class

CSS :past Pseudo-Class

The CSS :past pseudo-class is a time-dimensional selector intended to match elements whose active time has already passed in a timed presentation. It can represent completed captions or other synchronized content, but browser support is limited.

:past Syntax

selector:past {
  property: value;
}

The :past pseudo-class is intended to match an element when its active interval has ended relative to the current position in a timed presentation.

Basic Example

.caption:past {
  color: #777;
}

This rule describes how a caption could appear after its scheduled presentation time has passed in an environment that supports time-dimensional selectors.

Completed Segment

.segment:past {
  opacity: 0.5;
}

This rule is intended to reduce the prominence of a segment after its active interval ends.

No Parentheses

The :past pseudo-class does not accept arguments and is written without parentheses.

Important Compatibility Note

These selectors illustrate the proposed matching behavior. They should not be expected to produce visible changes in ordinary web pages because browser implementations are limited.

How :past Works

The :past pseudo-class belongs to the group of time-dimensional pseudo-classes defined for elements associated with a timed presentation.

Active Time Intervals

A timed element can have a defined interval during which it is active. Before that interval, it is considered future content. During the interval, it is current. After the interval, it is past content.

Conceptual CSS

.caption:past {
  color: #777;
}
.caption:current {
  color: #006699;
}
.caption:future {
  color: #333;
}

These rules describe three possible presentation states. Actual matching requires an environment that associates the elements with a supported timeline.

Not Based on Document Order

The :past pseudo-class is not intended to select elements merely because they appear before another element in the HTML document.

Not Based on the Clock

The selector does not determine whether a calendar date or clock time has passed. It refers to an element's position in a timed presentation.

Time-Dimensional Selectors

CSS defines time-dimensional pseudo-classes for identifying content according to its relationship with the current presentation time.

Time States

Conceptual Timeline

Past           Current           Future
[Segment 1]    [Segment 2]       [Segment 3]
 Completed      Playing          Upcoming

In this example, Segment 1 is past, Segment 2 is current, and Segment 3 is future.

State Changes

As the presentation position advances, an element may move from the future state to the current state and then to the past state.

Timeline Requirements

Ordinary HTML elements do not automatically receive timed intervals. A supporting presentation environment must establish the relationship between the elements and the timeline.

Timed Content

The :past pseudo-class is intended for content that has meaningful timing information, such as synchronized text in a timed presentation.

Caption Styling

.caption:past {
  color: #888;
}
.caption:current {
  color: #006699;
  font-weight: bold;
}

In a supporting environment, completed captions could appear muted while the current caption is emphasized.

Timed Presentation Segments

.presentation-segment:past {
  opacity: 0.5;
}

This rule describes a possible style for a completed presentation segment.

HTML Alone Is Not Enough

<div class="caption">First caption</div>
<div class="caption">Second caption</div>

These elements do not become past or current simply because they appear in this order. A timed presentation model must establish their active intervals.

Video Captions

HTML video elements can display captions through text tracks, but adding a <track> element does not automatically make ordinary HTML caption elements match :past.

Playback Position

The intended matching state depends on the current presentation position relative to the element's active interval.

Before the Active Interval

An element scheduled for a later time is considered future content rather than past content.

During the Active Interval

An element whose active interval includes the current presentation position is considered current content.

After the Active Interval

An element whose active interval has ended is considered past content and is intended to match :past.

Seeking Backward

Moving backward in a presentation can change an element from past to current or future, depending on the new position.

Pausing Playback

Pausing a presentation does not necessarily change which timed element is past. The state depends on the presentation position, not simply whether playback is paused.

Related Pseudo-Classes

The :past pseudo-class is related to other time-dimensional selectors, but it serves a different purpose from media playback state selectors.

Comparison

Past vs. Playing

.caption:past {
  color: #888;
}
video:playing {
  outline: 2px solid #006699;
}

The first rule describes a timed content state. The second targets a media element based on its playback state.

Past vs. Paused

A presentation can be paused while some timed elements remain past, others current, and others future. These states describe different conditions.

:past Specificity

The :past pseudo-class contributes a specificity of 0-1-0, like other standard pseudo-classes.

Specificity Examples

Specificity Example

.caption {
  color: #333;
}
.caption:past {
  color: #888;
}

In a supporting environment, the second rule takes precedence when the element matches :past and other cascade factors are equal.

Specificity Does Not Provide Support

A selector can have a defined specificity even when a browser does not implement its matching behavior. Specificity alone does not make :past functional.

Practical Uses

The following examples describe potential uses of :past in environments that support time-dimensional selectors.

Completed Captions

.caption:past {
  color: #888;
}

Reduces the prominence of captions whose presentation time has passed.

Completed Transcript Lines

.transcript-line:past {
  opacity: 0.6;
}

Distinguishes completed transcript lines from the currently active line.

Timed Presentation Steps

.step:past {
  border-left: 3px solid #777;
}

Provides a visual indication that a timed presentation step has ended.

Current and Past Content

.caption:current {
  font-weight: bold;
}
.caption:past {
  color: #888;
}

Separates active content from completed content in a supporting timed presentation.

Production Alternative

For ordinary web applications, JavaScript can update classes according to the playback position. This is a more practical approach when time-dimensional selectors are unavailable.

Limitations

The :past pseudo-class has significant compatibility and usage limitations.

Limited Browser Support

Major browsers do not provide broadly interoperable support for :past in ordinary HTML documents.

Requires Timed Content

Ordinary elements do not match :past merely because they appear earlier in the document or have already been displayed.

Not a Date Selector

The pseudo-class cannot determine whether a date in a calendar, event listing, or timestamp is earlier than the current date.

Not a Scroll Position Selector

Scrolling past an element does not make it match :past.

Not a Playback History Selector

The selector is based on the current presentation position, not on whether the user previously watched or visited particular content.

No Reliable Standalone Browser Demo

Because the intended matching behavior is not widely implemented, a normal HTML editor cannot reliably demonstrate a working :past selector.

Best Practices

• Use :past only when working with a supporting timed presentation environment.
• Do not rely on :past for essential styling in ordinary web pages.
• Understand the distinction between past, current, and future presentation states.
• Do not confuse presentation timing with document order or calendar dates.
• Use JavaScript and CSS classes for synchronized content when broad browser support is required.
• Keep timed content accessible without depending on color or opacity alone.
• Test any time-dimensional selector in the intended presentation environment.
• Check current browser compatibility before using experimental selectors in production.

:past Example

The following example demonstrates the intended appearance of past, current, and future transcript lines. Because :past is not reliably supported in ordinary browsers, the working example uses JavaScript to update CSS classes as the simulated presentation position changes.

Conceptual CSS

.transcript-line:past {
  color: #888;
}
.transcript-line:current {
  color: #006699;
  font-weight: bold;
}
.transcript-line:future {
  color: #333;
}

These are the intended time-dimensional selectors, not the CSS used to implement the working browser demonstration.

HTML

<div class="past-demo">
  <div class="transcript-line is-past">Step 1: Introduction</div>
  <div class="transcript-line is-current">Step 2: CSS Selectors</div>
  <div class="transcript-line is-future">Step 3: Practice Example</div>
  <div class="demo-controls">
    <button type="button" id="previous-step">Previous</button>
    <button type="button" id="next-step">Next</button>
  </div>
</div>

CSS

.past-demo .transcript-line {
  padding: 10px;
  margin-bottom: 6px;
  border: 1px solid #ddd;
}
.past-demo .is-past {
  color: #888;
  background-color: #f5f5f5;
}
.past-demo .is-current {
  color: #006699;
  background-color: #eaf6fc;
  border-color: #006699;
  font-weight: bold;
}
.past-demo .is-future {
  color: #333;
}
.past-demo .demo-controls {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.past-demo button {
  padding: 8px 12px;
  cursor: pointer;
}

JavaScript

const lines = document.querySelectorAll(".past-demo .transcript-line");
let currentStep = 1;
function updateSteps() {
  lines.forEach((line, index) => {
    line.classList.toggle("is-past", index < currentStep);
    line.classList.toggle("is-current", index === currentStep);
    line.classList.toggle("is-future", index > currentStep);
  });
}
document.getElementById("previous-step").addEventListener("click", () => {
  currentStep = Math.max(0, currentStep - 1);
  updateSteps();
});
document.getElementById("next-step").addEventListener("click", () => {
  currentStep = Math.min(lines.length - 1, currentStep + 1);
  updateSteps();
});

Browser Result

Play in Editor

Note: This demonstration uses JavaScript classes to simulate the intended states. It does not demonstrate native browser support for :past. Use Previous and Next to change the simulated presentation position.

Browser Support

Baseline: Limited availability. The :past pseudo-class is not broadly supported in major browsers and should not be relied upon for production web pages.

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

Recommended Alternative

Use JavaScript to track the current playback or presentation position and apply classes such as .is-past, .is-current, and .is-future when synchronized styling is needed.

Specifications

The :past pseudo-class is defined in CSS Selectors Level 4 as a time-dimensional pseudo-class for elements that occur before the current presentation position.

Selectors Level 4 - Time-Dimensional Pseudo-Classes