Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。
タイポグラフィ Newly available

counter-set

既存のCSSカウンターの現在値を直接設定できるプロパティです。counter-reset が新しいカウンターのスコープを作成するのに対し、counter-set は既存のカウンターの値を変更します。連番の途中で値を変更したい場合や、特定の要素から異なる番号で再開したい場合に便利です。

カウンター値設定

概要

既存のCSSカウンターの現在値を直接設定できるプロパティです。counter-reset が新しいカウンターのスコープを作成するのに対し、counter-set は既存のカウンターの値を変更します。連番の途中で値を変更したい場合や、特定の要素から異なる番号で再開したい場合に便利です。

対応ブラウザ

デスクトップ

Chrome 85+
Edge 85+
Safari 17.2+
Firefox 68+

モバイル

Chrome Android 85+
Safari iOS 17.2+
Firefox Android 68+

基本構文

CSS 
.restart-at-10 {
  counter-set: section 10;
}
.restart-at-10 ~ section::before {
  content: counter(section) '. ';
  counter-increment: section;
}

実務での使いどころ

  • カウンターの途中リセット

    文書の特定のセクションからカウンターの値を任意の数値に変更し、連番を柔軟に制御できます。

注意点

  • counter-set と counter-reset の違いを理解してください。counter-set は新しいスコープを作成せず、既存カウンターの値を変更するだけです。

アクセシビリティ

  • CSSカウンターによる番号付けはスクリーンリーダーに読み上げられる場合があります。HTMLの意味的な構造（ol、li など）と一致していることを確認してください。

参考リンク