CSS :current Pseudo-Class

CSS :current Pseudo-Class

The CSS :current pseudo-class selects an element, or an ancestor of an element, that is currently being presented in time-based content. It can be used to highlight the active portion of a presentation, such as text being read aloud or synchronized content associated with media playback.

:current Syntax

:current {
  property: value;
}

The :current pseudo-class has no arguments. It matches elements identified as current by a supported time-based presentation system.

Example Syntax

p:current {
  background-color: #fff3cd;
  color: #664d03;
}

This rule highlights a paragraph while it is the current element in a supported time-based presentation.

The functional :current() form accepts a list of compound selectors. It is covered separately in the CSS :current() reference.

How :current Works

Time-dimensional pseudo-classes identify elements according to their position in a presentation timeline. The timeline must be defined by the document format or another supported presentation system.

When an element becomes the currently presented content, it can match :current. Its ancestors can also match because they contain the current element.

When the presentation advances, the current state can move to another element. Styles using :current can then update automatically.

Expected Matching Behavior

Important: The :current pseudo-class does not automatically match the visible paragraph, the focused element, or the element under the mouse pointer. A supported presentation context must establish which content is current.

Elements That Match :current

The :current pseudo-class is not restricted to a particular HTML element. Matching depends on whether the element participates in a supported time-based presentation.

Speech Presentation

A speech-rendering system could identify the paragraph currently being read aloud.

<article>
  <p>Introduction to CSS selectors.</p>
  <p>Pseudo-classes describe element states.</p>
  <p>Some pseudo-classes depend on time.</p>
</article>

article p:current {
  background-color: #fff3cd;
  border-left: 4px solid #e67e22;
  padding: 10px;
}

If the presentation system identifies one of these paragraphs as current, the browser can apply the highlighted style.

Ordinary HTML and a standard browser do not automatically create a speech timeline for these paragraphs. The example demonstrates the selector's intended behavior rather than guaranteed browser output.

Timed Media Content

Time-based content can also include captions or subtitles synchronized with audio or video playback.

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

WebVTT captions have their own timing information and styling mechanisms. Support for using :current with caption content is not consistent across browsers, so it should not be relied upon as the only method of highlighting active captions.

Related Time-Based Pseudo-Classes

CSS defines three time-dimensional states for identifying content before, during, and after the current presentation position.

Example

p:past {
  color: #777;
}
p:current {
  color: #000;
  background-color: #fff3cd;
}
p:future {
  color: #999;
}

In a supported time-based presentation, past paragraphs appear gray, the current paragraph is highlighted, and future paragraphs use a lighter text color.

These states are not automatically assigned to ordinary document elements based on their position on the page.

Practical Uses

The :current pseudo-class is intended for interfaces that present content in a defined sequence over time.

Highlighting Narrated Text

.transcript p:current {
  background-color: #fff3cd;
  border-left: 4px solid #e67e22;
  padding: 10px;
}

A supported speech presentation could highlight the paragraph being narrated while leaving the remaining paragraphs unchanged.

Highlighting the Current List Item

.presentation li:current {
  background-color: #eaf6fc;
  color: #005580;
  font-weight: bold;
}

In a time-based presentation that establishes a current list item, the matching item receives a blue highlight.

Providing a Browser-Compatible Alternative

For ordinary web pages, JavaScript can update a class as a presentation advances. This is a practical alternative when :current is unsupported or when no native presentation timeline exists.

.transcript .is-current {
  background-color: #fff3cd;
  border-left: 4px solid #e67e22;
  padding: 10px;
}

The .is-current class can be added to the active paragraph and removed from the previous paragraph using JavaScript. Unlike :current, the class does not depend on native time-dimensional selector support.

Best Practices

• Use :current only when a supported presentation context defines the current element.
• Do not confuse :current with :active, :focus, or :target.
• Provide a fallback for browsers that do not support time-dimensional selectors.
• Use JavaScript-managed classes when you need reliable highlighting in an ordinary HTML presentation.
• Do not rely on color alone to identify the currently presented content.
• Keep highlighting readable and avoid distracting visual effects.
• Test the actual presentation system and browser combination before relying on automatic matching.

:current Example

This example demonstrates the appearance of currently presented text. The CSS includes :current for supported presentation systems and uses a JavaScript-managed class to provide a working demonstration in ordinary browsers.

HTML

<div class="current-demo">
  <p class="is-current">Step 1: Introduction</p>
  <p>Step 2: Understanding selectors</p>
  <p>Step 3: Applying styles</p>
  <button type="button" id="next-step">Next Step</button>
</div>

CSS

.current-demo p {
  padding: 8px;
  margin: 0 0 8px;
  border-left: 4px solid transparent;
}
.current-demo p:current,
.current-demo p.is-current {
  background-color: #fff3cd;
  border-left-color: #e67e22;
  color: #664d03;
  font-weight: bold;
}
.current-demo button {
  padding: 7px 12px;
  cursor: pointer;
}

JavaScript

const steps = document.querySelectorAll(".current-demo p");
const button = document.querySelector("#next-step");
let currentIndex = 0;
button.addEventListener("click", () => {
  steps[currentIndex].classList.remove("is-current");
  currentIndex = (currentIndex + 1) % steps.length;
  steps[currentIndex].classList.add("is-current");
});

Browser Result

Click Next Step to move the highlight between the paragraphs. The working demonstration uses .is-current because an ordinary HTML document does not establish the timeline required for :current.

Play in Editor

Note: This is a visual simulation of the intended highlighting behavior, not a test proving that the browser supports the :current pseudo-class.

Browser Support

Baseline: Limited availability. The :current pseudo-class is experimental and is not consistently supported across major browsers. Support also depends on the type of time-based content being presented.

Browsers that do not recognize :current ignore unsupported selector rules. Use a separate class-based fallback when highlighting must work reliably.

For current compatibility information, visit Can I Use? and search for CSS :current.

Specifications

The :current pseudo-class is defined in the CSS Selectors specification under time-dimensional pseudo-classes.

Selectors Level 5 - The :current Pseudo-Class