Scroll marker target pseudo-classes
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
:target-after は CSS の擬似クラスで、スクロールマーカーグループ内で、（現在 :target-current に一致する）アクティブなスクロールマーカーの後にあるスクロールマーカーを選択します。このセレクターを使用すると、スクロールマーカーグループ内で現在のナビゲーション位置の後に位置するナビゲーションアイテムをスタイル設定できます。
メモ: :target-after 擬似クラスは、::scroll-marker 擬似要素および scroll-target-group プロパティによってスクロールマーカーとして指定された要素でのみ有効です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
:target-after 実験的 | 142 | 142 | | | 142 | |
| その他 | ||||||
| 142 | 142 | | | 142 | | |
| `:ターゲット電流` | 135 | 135 | | | 135 | |
基本構文
CSS
.item::scroll-marker:target-current {
background: #3498db;
}
.item::scroll-marker:target-before {
opacity: 0.5;
}ライブデモ
実務での使いどころ
-
カルーセルのアクティブインジケーター表示
現在表示中のスライドに対応するドットインジケーターをハイライト表示し、ユーザーに現在位置を示します。
注意点
- Chrome 142以降でのみサポートされており、他のブラウザではフォールバックが必要です。
アクセシビリティ
- スクロールマーカーの状態変化が支援技術にも適切に伝わるよう、aria属性による補足を検討してください。