:target-current

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

:target-current は CSS の擬似クラス で、アクティブなスクロールマーカー、つまり、現在スクロールされている ::scroll-marker 擬似要素の scroll-marker-group を選択します。このセレクターは、スクロールマーカーグループ内のアクティブなナビゲーションの位置のスタイル設定に使用できます。

メモ: :target-current 擬似クラスは、 ::scroll-marker 擬似要素でのみ有効です。

構文

css
:target-current {
  /* ... */
}

例

CSS によるカルーセルの作成 および ::scroll-marker に、 :target-current 擬似クラスの完全な使用例があります。

基本的な使用

css
::scroll-marker {
  background-color: white;
}

::scroll-marker:target-current {
  background-color: black;
}

仕様書

Specification
CSS Overflow Module Level 5
# active-scroll-marker

ブラウザーの互換性

関連情報