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 :matches(), 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 No No No No
Mobile No No No No No No

Usage statistics (Alexa Top 500,000 sites)


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