:target-current | CSS Selectors & Pseudo-classes

An experimental pseudo-class that matches the 'scroll marker' corresponding to the item currently visible in the viewport. This is the 'active' state for carousel indicators.

Quick example

.carousel::scroll-marker:target-current {
  /* Highlights the indicator for the currently visible slide */
  background-color: var(--brand-active);
  transform: scale(1.2);
}

:target-current Browser Support

Limited availability 69% global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Not ready for production without a fallback.

View on caniuse.com → View on MDN → View on webstatus.dev → View spec → Learn more about Baseline →

135+