Pseudo-classe CSS `:future`

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Want more support for this feature? Tell us why.

En savoir plus
Voir la compatibilité complète

Le sélecteur de pseudo-classe CSS :future agit dans la dimension temporelle qui cible n'importe quel élément apparaissant entièrement après un élément correspondant à :current. Ce sélecteur peut par exemple servir dans le cas d'une vidéo ayant des sous-titres affichés à l'aide du format WebVTT.

css

:future(p, span) {
  display: none;
}

Syntaxe

css

:future {
  /* ... */
}

Exemples

HTML

html

<video controls preload="metadata">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <track
    label="Français"
    kind="subtitles"
    srclang="fr"
    src="subtitles.vtt"
    default />
</video>

CSS

css

:future(p, span) {
  display: none;
}

WebVTT

FICHIER WEBVTT

1
00:00:03.500 --> 00:00:05.000
Voici le premier sous-titre

2
00:00:06.000 --> 00:00:09.000
Voici le second sous-titre

3
00:00:11.000 --> 00:00:19.000
Voici le troisième sous-titre