CSS :current() Pseudo-Class

CSS :current() Pseudo-Class

The CSS :current() pseudo-class selects the currently presented element, or its closest matching ancestor, in time-based content. Unlike :current, the functional form accepts a list of selectors to specify which elements should receive the current-state styling.

:current() Syntax

:current(selector-list) {
  property: value;
}

The :current() pseudo-class requires a comma-separated list of one or more compound selectors inside its parentheses.

Example Syntax

:current(p, li) {
  background-color: #fff3cd;
}

This rule is intended to highlight the current paragraph or list item during a supported time-based presentation.

A compound selector can combine a type selector, class selector, ID selector, attribute selector, or pseudo-class without combinators.

Compound Selector Example

:current(p.narration, li.active-item) {
  background-color: #fff3cd;
}

This rule limits matching to paragraphs with the narration class and list items with the active-item class.

How :current() Works

Time-dimensional pseudo-classes depend on a presentation timeline established by the document format or another supported presentation system. CSS does not create this timeline.

When an element is identified as current, :current() first checks whether that element matches one of its selector arguments. If it does not, the browser searches its ancestors and selects the closest ancestor that matches.

If neither the current element nor any ancestor matches the supplied selectors, :current() matches nothing.

Expected Matching Behavior

Important: The functional form does not select every ancestor matching the argument. It selects the current element when it matches, or otherwise the innermost matching ancestor.

:current() Selector Arguments

The arguments inside :current() form a list of compound selectors. Each argument describes a type of element that can be selected from the current element's ancestor chain.

Valid Selector Arguments

Using Multiple Selectors

:current(p, li, dt, dd) {
  background-color: #fff3cd;
  color: #664d03;
}

This rule can style the currently presented paragraph, list item, definition term, or definition description in a supported speech presentation.

Selectors That Are Not Allowed

/* Invalid argument: descendant combinator */
:current(article p) {
  color: blue;
}

The argument article p is a complex selector because it contains a descendant combinator. The :current() pseudo-class accepts compound selectors rather than complex selectors.

Use a compound selector such as p.narration when you need to restrict the matching element by its own classes or attributes.

:current vs. :current()

Both forms depend on the same time-based presentation state, but they differ in how elements are selected.

Example

<section class="narration">
  <p>Learning about <strong>CSS selectors</strong>.</p>
</section>

Suppose a supported presentation system identifies the <strong> element as current.

:current {
  outline: 1px solid #999;
}
:current(p, section) {
  background-color: #fff3cd;
}

The first rule can match the <strong> element and its ancestors. The second selects the paragraph because it is the closest ancestor matching either p or section.

This distinction is useful when you want to highlight a meaningful container rather than every ancestor of the current content.

Practical Uses

The :current() pseudo-class is intended for documents and applications that present content according to a defined timeline.

Highlighting Narrated Paragraphs

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

When the current content is inside a paragraph with the narration class, that paragraph can receive the highlight.

Highlighting List Items

:current(li) {
  color: #005580;
  background-color: #eaf6fc;
  font-weight: bold;
}

If the current content is a list item or an element inside it, the closest matching list item is selected.

Selecting Different Content Types

:current(p, li, blockquote) {
  border-left: 4px solid #0088cc;
  padding-left: 12px;
}

This rule can highlight paragraphs, list items, or blockquotes, depending on which matching element is closest to the currently presented content.

Browser-Compatible Alternative

For ordinary HTML documents, JavaScript can identify the active content and add a class to the appropriate container.

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

Unlike :current(), the class-based approach does not require native support for time-dimensional selectors. JavaScript must still determine which element should be highlighted.

Best Practices

• Use :current() only when a supported time-based presentation establishes a current element.
• Provide one or more compound selectors as arguments.
• Use the functional form when you need the closest matching element rather than all current ancestors.
• Avoid descendant and child combinators inside the argument list.
• Do not confuse :current() with :current, :active, or :focus.
• Provide a fallback for browsers without support for the pseudo-class.
• Use JavaScript-managed classes for reliable highlighting in ordinary HTML presentations.
• Test the selector in the actual presentation environment before using it in production.

:current() Example

This example demonstrates how :current() is intended to highlight the closest matching container. Because ordinary HTML does not establish the required presentation timeline, JavaScript supplies a working visual simulation.

HTML

<div class="current-function-demo">
  <p class="is-current">Step 1: Introduction to CSS</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-function-demo p {
  padding: 8px;
  margin: 0 0 8px;
  border-left: 4px solid transparent;
}
.current-function-demo :current(p),
.current-function-demo p.is-current {
  background-color: #fff3cd;
  border-left-color: #e67e22;
  color: #664d03;
  font-weight: bold;
}
.current-function-demo button {
  padding: 7px 12px;
  cursor: pointer;
}

JavaScript

const steps = document.querySelectorAll(".current-function-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 example uses a class to simulate the selection that :current(p) would provide in a supported time-based presentation.

Play in Editor

Note: This example demonstrates the intended visual effect. The JavaScript-managed class, not native :current() matching, makes the highlight work in ordinary browsers.

Browser Support

Baseline: Limited availability. The :current() pseudo-class is experimental and is not supported across major browsers. It should not be relied upon for production interfaces without a fallback.

Browsers that do not recognize :current() ignore unsupported selector rules. Keep fallback selectors in a separate rule or a valid selector list to maintain compatibility.

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

Specifications

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

Selectors Level 5 - The :current Pseudo-Class