:current

Псевдокласс :current выбирает элемент, который сейчас находится в активном состоянии отображения или выделения.

Он используется в так называемых *time-dimensional selectors- и других сценариях, где есть “текущий элемент” в последовательности.

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

• WebVTT субтитров
• поиска по странице (Find in Page)
• выделенных элементов в последовательностях

        
          
          :current(p, span) {  background-color: #ffe600;}
          :current(p, span) {
  background-color: #ffe600;
}

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

        
          
          <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>

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

        
          
          p::search-text {  background-color: purple;  color: white;}p::search-text:current {  background-color: crimson;  text-decoration: underline;}
          p::search-text {
  background-color: purple;
  color: white;
}

p::search-text:current {
  background-color: crimson;
  text-decoration: underline;
}

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

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

        
          
          :current {  /* стили для текущего элемента */}
          :current {
  /* стили для текущего элемента */
}

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

Также может принимать уточнение через селектор:

        
          
          :current(<selector-list>) {  /* стили для текущего элемента */}
          :current(<selector-list>) {
  /* стили для текущего элемента */
}

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

---

:current обозначает элемент, который в данный момент активен в своей последовательности.

Это может означать:

• текущий отображаемый фрагмент субтитров
• активный результат поиска в браузере
• выделенный элемент в последовательности контента

Он часто используется вместе с:

• :past
• :future

💡 :current особенно полезен для стилизации временных медиа (субтитров), где есть активный момент воспроизведения.
💡 Может применяться не только к видео, но и к поисковым результатам через ::search-text.
💡 Почти всегда используется в паре с :past и :future для создания полного временного UX.