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
/* Current */
:current { /* declarations */ }
:current(s1[, s2, …]) { /* declarations */ }
/* Past */
:past { /* declarations */ }
/* Future */
:future { /* declarations */ }
# Example
: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
For future browser support information, also check out caniuse.com (Time-dimensional pseudo-class).
# 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.