:current / :past / :future

Time-Dimensional

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 (tested using latest versions)

Desktop
Google Chrome
No
Mozilla Firefox
No
Safari
No
Opera Browser
No
Internet Explorer
No
Mobile
Android Browser
No
Chrome for Android
No
Mozilla Firefox Mobile
No
Safari iOS
No
Opera Mobile
No
IE Mobile
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.