Scroll marker target pseudo-classes

スクロールマーカーターゲット擬似クラスは、スクロールマーカー（::scroll-marker）の状態に基づいてスタイルを適用します。:target-currentはアクティブなマーカー、:target-beforeと:target-afterはそれぞれアクティブマーカーの前後にある非アクティブマーカーを選択します。カルーセルのページインジケーターやタブパネルの現在位置表示に活用できます。

スクロールマーカー擬似クラス

概要

対応ブラウザ

デスクトップ

Chrome 142+

Edge 142+

Safari 未対応

Firefox 未対応

モバイル

Chrome Android 142+

Safari iOS 未対応

Firefox Android 未対応

基本構文

CSS

.item::scroll-marker:target-current {
  background: #3498db;
}
.item::scroll-marker:target-before {
  opacity: 0.5;
}

実務での使いどころ

カルーセルのアクティブインジケーター表示

現在表示中のスライドに対応するドットインジケーターをハイライト表示し、ユーザーに現在位置を示します。

注意点

Chrome 142以降でのみサポートされており、他のブラウザではフォールバックが必要です。

参考リンク

MDN Web Docs — Scroll marker target pseudo-classes

概要