CSS Selector Level 4 » Time-dimensional pseudo-class

This pseudo-class is called time-dimensional and will select the time-dimensional relative element like during a speech rendering or during the display of HTML5 video subtitles. All these selectors are similar to :is(), while the :current selector accepts additionally a simple selector list as argument. The difference between these 3 pseudo-classes is that :past will select all previous siblings of the :current element, self-explanatory that :future is for all next siblings.

# Syntax

Copy
/* Current */
:current { /* declarations */ }
:current(s1[, s2,]) { /* declarations */ }

/* Past */
:past { /* declarations */ }

/* Future */
:future { /* declarations */ }

# Example

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

:past,
:future {
    display: none;
}

These selector rules will highlight the current read aloud speech with a yellow background and the previous and next siblings will be hidden.

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop No No Yes (7) No No No
Mobile No No Yes (7) No No No

# Usage statistics (Alexa Top 1,250,000 sites)

Due to an extreme price increase of our statistics provider the data collection was stopped in September 2018.


Please wait a moment, the comments start loading now...
explorermozillachromesafariopera info external