:future

Псевдокласс :future выбирает элементы, которые находятся после текущего активного состояния в временной последовательности.

Он относится к так называемым time-dimensional selectors — селекторам, работающим с временными потоками (например, субтитрами или медиа).

Чаще всего используется в контексте:

• <video>
• WebVTT субтитров
• временных треков

В этом примере скрываются ещё не показанные субтитры:

        
          
          :future {  opacity: 0.3;}
          :future {
  opacity: 0.3;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          <video controls>  <source src="video.mp4" type="video/mp4" />  <track    label="English"    kind="subtitles"    srclang="en"    src="subtitles.vtt"    default></video>
          <video controls>
  <source src="video.mp4" type="video/mp4" />
  <track
    label="English"
    kind="subtitles"
    srclang="en"
    src="subtitles.vtt"
    default>
</video>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Псевдокласс :future используется как обычный CSS-селектор:

        
          
          :future {  /* стили для элементов в будущем */}
          :future {
  /* стили для элементов в будущем */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Также может комбинироваться с другими селекторами:

        
          
          video::cue(:future) {  opacity: 0.2;}
          video::cue(:future) {
  opacity: 0.2;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Временные медиапотоки (например, субтитры) делятся на три состояния:

• :past — уже было показано
• :current — показывается сейчас
• :future — ещё не достигнуто

:future позволяет стилизовать элементы, которые ещё не появились в текущем времени воспроизведения.

Это полезно для:

• визуального “приглушения” будущих субтитров
• создания эффекта прогресса текста
• интерфейсов с временной навигацией

💡 :future почти всегда используется вместе с :current и :past, чтобы визуально разделять временные состояния.
💡 Подходит для эффектов “кинематографичных” субтитров — когда текст постепенно появляется.
💡 Работает только в ограниченных контекстах (в основном WebVTT и медиа-потоки), а не в обычной вёрстке HTML.