CSS :target-current Pseudo-Class

CSS :target-current Pseudo-Class

The CSS :target-current pseudo-class selects the active scroll marker within a scroll marker group. It allows CSS to highlight the navigation link or marker associated with the current scroll position, without requiring JavaScript to track which section or carousel item is active. This experimental feature is defined in CSS Overflow Module Level 5.

:target-current Syntax

:target-current {
  property: value;
}

The :target-current pseudo-class matches the active scroll marker in a scroll marker group.

Basic Example

a:target-current {
  color: #006699;
}

Styles a navigation link when it is the active scroll marker.

Highlight the Active Marker

.section-nav a:target-current {
  font-weight: bold;
  text-decoration: underline;
}

Background Highlight

.section-nav a:target-current {
  background-color: #eaf6fc;
}

No Arguments

Write :target-current without parentheses or arguments.

Scroll Marker Requirement

The selector applies to scroll markers, including qualifying navigation links inside a container using scroll-target-group: auto and supported ::scroll-marker pseudo-elements.

How :target-current Works

The browser determines which scroll marker is active within a group based on its associated scroll target. The active marker matches :target-current.

Step 1 - Create Navigation Links

<nav class="section-nav" aria-label="Page sections">
  <a href="#section-one">One</a>
  <a href="#section-two">Two</a>
  <a href="#section-three">Three</a>
</nav>

Step 2 - Create Destination Sections

<section id="section-one">
  <h2>Section One</h2>
</section>
<section id="section-two">
  <h2>Section Two</h2>
</section>
<section id="section-three">
  <h2>Section Three</h2>
</section>

Step 3 - Establish a Scroll Marker Group

.section-nav {
  scroll-target-group: auto;
}

Step 4 - Style the Active Marker

.section-nav a:target-current {
  color: #006699;
  font-weight: bold;
}

Step 5 - Navigate Through the Sections

As the active scroll target changes, the browser updates which navigation marker matches :target-current.

No JavaScript Required

In supporting browsers, the active marker is determined automatically without a JavaScript scroll event listener.

Scroll Marker Groups

A scroll marker group contains navigation markers associated with scroll destinations. The browser uses the group to determine the active marker.

The scroll-target-group Property

.section-nav {
  scroll-target-group: auto;
}

The auto value establishes a scroll target group containing qualifying links.

HTML Navigation

<nav class="section-nav" aria-label="Tutorial sections">
  <a href="#introduction">Introduction</a>
  <a href="#syntax">Syntax</a>
  <a href="#examples">Examples</a>
</nav>

Destination IDs

Each link should identify a valid destination element using a fragment identifier.

Generated Scroll Markers

The ::scroll-marker pseudo-element can also create markers, commonly used with CSS carousels.

Multiple Groups

A document can contain multiple scroll marker groups. Each group independently determines its active marker.

Marker Order

The order of markers within a group is used by the related :target-before and :target-after pseudo-classes.

The Active Scroll Marker

The active scroll marker represents the scroll target selected by the browser within a marker group.

Active Marker Styling

.section-nav a:target-current {
  color: #006699;
  font-weight: bold;
}

Example Marker Order

Suppose a group contains four markers and the second marker is active.

Automatic State Changes

When the active marker changes, the previous marker stops matching :target-current and the newly active marker begins matching it.

One Active Marker Per Group

The browser selects one active marker within a group at a time, subject to the group's active marker determination rules.

Related Target States

Three pseudo-classes describe the position of a scroll marker relative to the active marker.

Comparison

Complete CSS Example

.section-nav a:target-before {
  color: #888;
}
.section-nav a:target-current {
  color: #006699;
  font-weight: bold;
}
.section-nav a:target-after {
  color: #b45309;
}

This allows a navigation group to visually distinguish earlier, current, and later positions.

Position Rather Than Completion

These selectors indicate marker positions relative to the active marker. They do not record whether users have read or completed the corresponding sections.

:target vs. :target-current

The :target and :target-current pseudo-classes identify different kinds of targets.

Using :target

section:target {
  background-color: #eaf6fc;
}

Highlights the section identified by the current URL fragment.

Using :target-current

.section-nav a:target-current {
  background-color: #eaf6fc;
}

Highlights the navigation marker associated with the active scroll target.

Different Matching Elements

The :target selector typically matches the destination element, while :target-current matches its active scroll marker.

Scrolling Behavior

The active marker can change when users scroll through content or activate links associated with scroll targets.

Scrolling Through Sections

As the browser determines that another destination is active, its marker can begin matching :target-current.

Clicking Navigation Links

Activating a scroll marker link can navigate to its destination and change the active marker.

Scroll Position

The browser determines the active marker using the scroll marker selection rules. It is not necessarily the marker for the section nearest the top of the viewport.

Marker Group Independence

Different scroll marker groups can have different active markers.

No JavaScript Scroll Listener

The browser updates selector matching automatically in supporting implementations.

Smooth Scrolling

.scroll-content {
  scroll-behavior: smooth;
}

Requests smooth scrolling within a scrollable content container.

Reduced Motion

@media (prefers-reduced-motion: reduce) {
  .scroll-content {
    scroll-behavior: auto;
  }
}

Disables requested smooth scrolling when the user prefers reduced motion.

:target-current Specificity

The :target-current pseudo-class contributes a specificity of 0-1-0, like other standard pseudo-classes.

Specificity Examples

Specificity Example

.section-nav a {
  color: #333;
}
.section-nav a:target-current {
  color: #006699;
}

The active marker rule has higher specificity than the general navigation link rule when other cascade factors are equal.

Practical Uses

The :target-current pseudo-class is useful for highlighting the active position in scroll-linked navigation.

Table of Contents

.table-of-contents a:target-current {
  font-weight: bold;
}

Documentation Navigation

.documentation-nav a:target-current {
  border-bottom: 2px solid #006699;
}

Section Navigation

.section-nav a:target-current {
  background-color: #eaf6fc;
}

Carousel Indicators

In a supported CSS carousel, the active scroll marker can receive a different color, size, or background.

Progress Navigation

.progress-nav a:target-current {
  outline: 2px solid #006699;
}

No Script-Based Tracking

In supporting browsers, the active marker can be styled without implementing JavaScript scroll position tracking.

Limitations

The :target-current pseudo-class is experimental and depends on scroll marker support.

Limited Browser Support

Not all browsers implement the selector or related scroll marker features.

Requires a Scroll Marker Group

The selector applies to markers belonging to a supported scroll marker group.

Not a General Active-Link Selector

Ordinary navigation links do not match :target-current unless they participate as scroll markers.

Not the Same as :target

The selector matches the active marker, not the document element identified by the URL fragment.

Browser-Determined Active Marker

The browser determines the active marker using scroll marker selection rules rather than a simple fixed viewport position.

No Automatic Completion Tracking

The active marker identifies a current position, not whether content has been completed.

Accessibility Considerations

CSS visual styling alone does not automatically update ARIA attributes or announce the current navigation position to assistive technology.

Evolving Specification

The selector belongs to CSS Overflow Module Level 5, which is still under development.

Best Practices

• Use :target-current only with supported scroll marker groups.
• Use scroll-target-group: auto when creating scroll marker navigation from ordinary links.
• Provide clear active marker styling with adequate contrast.
• Use more than color alone when indicating the current position is important.
• Keep navigation links functional when the experimental selector is unsupported.
• Combine :target-current with :target-before and :target-after when distinguishing relative positions.
• Use descriptive link text and unique destination IDs.
• Do not rely on the selector for accessibility announcements or completion tracking.
• Respect reduced-motion preferences when enabling smooth scrolling.
• Test scrolling and navigation in browsers that support the CSS Overflow features.

:target-current Example

This example creates a scroll marker group with four navigation links. Scroll through the sections or click a navigation link. The active marker receives blue text and a light blue background, while earlier and later markers use different styles in supporting browsers.

HTML

<div class="target-current-demo">
  <nav class="section-nav" aria-label="Example sections">
    <a href="#demo-one">One</a>
    <a href="#demo-two">Two</a>
    <a href="#demo-three">Three</a>
    <a href="#demo-four">Four</a>
  </nav>
  <div class="scroll-content">
    <section id="demo-one"><h2>Section One</h2><p>First section.</p></section>
    <section id="demo-two"><h2>Section Two</h2><p>Second section.</p></section>
    <section id="demo-three"><h2>Section Three</h2><p>Third section.</p></section>
    <section id="demo-four"><h2>Section Four</h2><p>Fourth section.</p></section>
  </div>
</div>

CSS

.target-current-demo .section-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  scroll-target-group: auto;
}
.target-current-demo .section-nav a {
  padding: 5px;
  color: #333;
}
.target-current-demo .section-nav a:target-before {
  color: #888;
}
.target-current-demo .section-nav a:target-current {
  color: #006699;
  background-color: #eaf6fc;
  font-weight: bold;
}
.target-current-demo .section-nav a:target-after {
  color: #b45309;
}
.target-current-demo .scroll-content {
  height: 180px;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.target-current-demo section {
  min-height: 180px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
.target-current-demo section h2 {
  margin: 0 0 10px;
  font-size: 18px;
}
@media (prefers-reduced-motion: reduce) {
  .target-current-demo .scroll-content {
    scroll-behavior: auto;
  }
}

Browser Result

Play in Editor

Note: In supporting browsers, the active navigation link receives a blue highlight. Earlier markers appear gray, and later markers appear brown. The links remain functional without these additional styles in unsupported browsers.

Browser Support

Baseline: Limited availability. The :target-current pseudo-class is experimental and is not supported by all major browsers. Chromium-based browsers introduced support in Chrome and Edge 142. Other browsers may ignore the selector.

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

Specifications

The :target-current pseudo-class is defined in CSS Overflow Module Level 5 alongside :target-before and :target-after.

CSS Overflow Module Level 5 - Selecting Scroll Markers