Time Dimensional :current / :past / :future

The time-dimensional pseudo-classes categorize elements with respect to the currently active position in a timeline (i.e. speech rendering of a document or video subtitles).

These selectors are similar to :matches().

:current
The :current pseudo-class matches an element that is currently being displayed. It takes a selector list as an argument.

:past
The :past pseudo-class matches any element that is defined to come before a :current element.

:future
The :future pseudo-class represents any element that is defined to come after a :current element.

Browser Support

Chrome Firefox Safari Opera IE Edge
Desktop no no no no no no
Mobile no no no no no no

Syntax

E:current(s1, s2, ...) { /* Style properties */ }

E:past(s1, s2, ...) { /* Style properties */ }

E:future(s1, s2, ...) { /* Style properties */ }

Example

/* Assume that paragraphs and lists are being read aloud. The following will highlight the current paragraph or list item being read in yellow, and the rest will be gray. */

:current(p, li) {
background-color: yellow;
}

:past(p, li),
:future(p, li) {
background-color: gray
}

Information is based on Selectors Level 4 - W3C Working Draft (last updated on May 2, 2013)
Copyright © 2013 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.