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().

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

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

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


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

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

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


/* 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.