demo · v140

Group vs No Group

Click a link, then scroll away from it. Without a marker group, the URL :target section stays sticky. With scroll-target-group: auto, the marker can follow whichever section is currently visible.

no group — URL :target only

A
The section itself matches :target after a fragment jump.
B
Scrolling here does not change the URL fragment.
C
Click C, then scroll down. The target remains C.
D
The visible section can differ from the target section.
URL targetnone
visible sectionA

with group — :target-current

A
The anchor for this section can match :target-current.
B
The current marker is recalculated as the scroller moves.
C
Click C, then scroll down. The URL target remains C while the current marker can move.
D
The marker follows the visible target instead of the last click.
URL targetnone
:target-currentA
.nav-group { scroll-target-group: auto; }
.nav-group a:target-current { background: var(--accent-emerald); color: var(--bg-ivory); }

section:target { outline: 3px solid var(--accent-rose); }

two pseudo-classes, two questions

:target answers what the URL fragment points at. :target-current answers which scroll marker's target is current in the scrollport. They can disagree after the user scrolls away from a clicked fragment.

see also