:target-current
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
:target-current は CSS の擬似クラスで、アクティブなスクロールマーカー、つまり、現在スクロールされている scroll-marker-group のスクロールマーカーを選択します。このセレクターは、スクロールマーカーグループ内のアクティブなナビゲーションの位置のスタイル設定に使用できます。
メモ:
:target-current 擬似クラスは、::scroll-marker 擬似要素および scroll-target-group プロパティによってスクロールマーカーとして指定された要素でのみ有効です。
構文
css
:target-current {
/* ... */
}
例
CSS によるカルーセルの作成 および ::scroll-marker に、 :target-current 擬似クラスの完全な使用例があります。
基本的な使用
css
::scroll-marker {
background-color: white;
}
::scroll-marker:target-current {
background-color: black;
}
仕様書
| 仕様書 |
|---|
| CSS Overflow Module Level 5 # active-scroll-marker |