Time-relative pseudo-selectors
The :future CSS pseudo-class selector is a time-dimensional pseudo-class that will match for any element which appears entirely after an element that matches :current. For example in a video with captions which are being displayed by WebVTT.
css
:future(p, span) { display: none; }
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 23 | 79 | | 7 | 25 | 7 | |
| Other | ||||||
| `:past` | 23 | 79 | | 7 | 25 | 7 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
::cue:past {
color: gray;
opacity: 0.5;
}
::cue:future {
color: white;
}Live demo
Use cases
-
Using Time-relative pseudo-selectors
The :future CSS pseudo-class selector is a time-dimensional pseudo-class that will match for any element which appears entirely after an element that matches :current.
Cautions
- Limited browser support. Check compatibility before use.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.