The problem is simple and kind of annoying: you have a table of contents next to a long article, and as the reader scrolls, the link for the section they're actually looking at should be the one that lights up.
That usually turns into JavaScript. You watch headings with scroll events or IntersectionObserver, figure out which one is "current," then keep an active class on the matching link.
That's not a huge amount of code. It's just annoying as hell to get right once short sections, tall sections, sticky headers, nested scroll containers, and "why did the active link flicker right there?" show up.
The weird CSS version is scroll-target-group, paired with :target-current.
scroll-target-group: auto goes on the wrapper that contains your anchor links. It tells the browser those links belong to one group and to keep track of which linked target is current. The anchors don't become anything weird. They're still normal links pointing at real fragment IDs.
:target-current is how you style the link the browser picked. You need both parts: the property creates the group, and the pseudo-class gives CSS something to grab onto.
<nav class="toc" aria-label="Article sections">
<ol>
<li><a href="#overview">Overview</a></li>
<li><a href="#setup">Setup</a></li>
<li><a href="#deploy">Deploy</a></li>
</ol>
</nav>
<article class="article">
<section id="overview"><h2>Overview</h2></section>
<section id="setup"><h2>Setup</h2></section>
<section id="deploy"><h2>Deploy</h2></section>
</article>
.toc {
scroll-target-group: auto;
}
.toc a:target-current {
color: var(--accent);
}
This is the thing everyone calls "scrollspy." I kind of hate that name because it makes the problem sound more frameworky than it is. It's just a nav that knows where the reader is.
The demo below is a progressive enhancement. In a supporting browser, the current link turns green and gets a little dot. If your browser doesn't support it, the table of contents still works as a pile of regular links. You just don't get the automatic current-section highlight.
Browser support is still the catch. As I write this, it's mostly a Chromium thing; Firefox and Safari don't support it yet, and MDN still marks it experimental. The property is being worked through in CSS Overflow Level 5. Can I Use has the current support table, and Una Kravets has a good demo if you want to go deeper.
So no, I wouldn't use this as the only way to communicate where someone is on a page yet. The links and headings are the feature. The automatic highlight is just a really nice bit of CSS on top, and in supporting browsers it deletes a chunk of fussy JavaScript.