:past

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

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

Чаще всего встречается в контексте:

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

В этом примере скрываются уже “проигранные” субтитры:

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

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

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

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

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

        
          
          :past {  /* стили для элементов в прошлом */}
          :past {
  /* стили для элементов в прошлом */
}

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

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

        
          
          video::cue(:past) {  opacity: 0.5;}
          video::cue(:past) {
  opacity: 0.5;
}

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

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

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

:past позволяет стилизовать элементы, которые уже прошли в потоке воспроизведения.

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

• затемнения уже прочитанных субтитров
• визуализации прогресса текста
• создания эффектов “истории воспроизведения”

💡 Чаще всего :past используется вместе с :current и :future, чтобы создать визуальную шкалу времени.
💡 Работает только в специфических контекстах (например, WebVTT), а не для обычных HTML-элементов.
💡 Поддержка ограничена — многие браузеры не реализуют time-dimensional pseudo-classes полностью.