テック技報最新号へ →
CSS

:target-current で目次の「いま読んでいる項目」をCSSだけでハイライト

目次の親に scroll-target-group: auto を付けると、ページ内リンクが「スクロールマーカー」になり、表示中セクションのリンクに :target-current が当たる。

@clockmaker · 2026-10-09
#スクロール#ナビゲーション#目次#新機能#JS不要

どんな時に使う？

  • 記事ページのサイド目次やページ内ナビで、スクロール位置に合わせて現在地をハイライトしたいとき。
  • これまで Intersection Observer で書いていた処理を置き換えたいとき。

コード

html
<nav class="toc">
  <a href="#intro">はじめに</a>
  <a href="#usage">使い方</a>
  <a href="#faq">FAQ</a>
</nav>
css
.toc {
  scroll-target-group: auto; /* 中の a[href="#…"] がスクロールマーカーになる */
}
.toc a:target-before  { color: #999; }               /* 通過ずみ */
.toc a:target-current { color: #0066cc; font-weight: bold; } /* 表示中 */
.toc a:target-after   { color: #333; }               /* 未到達 */

/* :has() と組み合わせて親の li を装飾することもできる */
.toc li:has(a:target-current) { border-inline-start: 3px solid currentColor; }

注意点・対応状況

  • 実験的な機能で Chromium 系のみ対応（2026年時点）。Can I use で要確認。未対応ブラウザではハイライトが出ないだけなので、プログレッシブエンハンスメントとして使える。
  • :target-before / :target-after はさらに新しいので対応状況を個別に確認。
  • 同じ仕組みは ::scroll-marker を使った CSS カルーセルのドット表示にも使われる。

出典

X の元の投稿を開く