The :current pseudo-class represents an element that is currently being presented or played within a time-based context, such as media timelines, captions, or other sequential content. It is part of the Selectors Level 4 specification and is primarily designed for synchronised or temporal content, where different elements become active at different moments in time. Unlike interaction-based states (such as hovering or focusing), :current reflects temporal relevance rather than user input.

In practice, :current is most commonly associated with media-related markup, such as text tracks used in videos. For example, when captions are displayed during video playback, the cue that is currently active can be targeted using :current. This makes it possible to visually highlight the active caption or lyric while media is playing. The pseudo-class is often conceptually compared to :active, but while that class responds to user interaction, :current responds to playback state over time.

Because :current is tied to timed media, it is frequently used alongside HTML elements such as track. When captions or subtitles are parsed and rendered by the browser, the currently active cue can be styled dynamically. This allows for effects such as highlighting the current line, changing text emphasis, or improving accessibility by visually guiding the viewer through spoken content.

Example: Styling the currently active caption

<video controls width="400">
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="captions.vtt" srclang="en" default>
</video>

::cue(:current) {
  color: yellow;
  background-color: rgba(0, 0, 0, 0.7);
  font-weight: bold;
}

In this example, the currently displayed caption cue is visually highlighted while the video plays. The browser automatically updates which cue matches :current as playback progresses.

Usage considerations

Support for :current is limited and mostly relevant to advanced media use cases, particularly when working with captions or other timed text. It is not intended for general UI state management, and for most interactive interfaces, developers will rely on JavaScript or more widely supported pseudo-classes. Still, :current plays an important role in accessibility and synchronized media presentation, especially when paired with time-based rendering engines.

Overall, :current provides a semantic way to style what is happening now, making it especially useful for multimedia experiences where timing and context matter.