counter-set

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

counter-set は CSS のプロパティで、CSS カウンターを指定された値に設定します。これは既存のカウンターの値を操作し、その要素に指定された名前のカウンターがまだ存在しない場合は新しいカウンターを生成します。

試してみましょう

メモ: カウンターの値は counter-increment プロパティを使用して増減させることができます。

構文

css
/* "my-counter" を 0 に設定 */
counter-set: my-counter;

/* "my-counter" を -1 に設定 */
counter-set: my-counter -1;

/* "counter1" を 1 に、 "counter2" を 4 に設定 */
counter-set: counter1 1 counter2 4;

/* より詳細度が低いルールで設定されたカウンターをすべて消去 */
counter-set: none;

/* グローバル値 */
counter-set: inherit;
counter-set: initial;
counter-set: revert;
counter-set: unset;

counter-set プロパティは、以下のうちの何れかで指定します。

  • カウンターの名前を指定する <custom-ident> と、それに続く任意の <integer>。カウンターはいくつでも指定することができ、それぞれの名前や名前と数値の組は空白で区切ります。
  • キーワード値 none。

値

<custom-ident>

設定するカウンターの名前です。

<integer>

この要素が現れるたびにカウンターに設定する値です。指定されなかった場合の既定値は 0 です。現在、この要素に指定された名前のカウンターが存在しない場合、この要素は指定された名前の新しいカウンターを、開始値 0 で指定します（ただし、その後で直ちに異なる値に設定されたり増加したりする可能性があります）。

none

カウンターの設定は行われません。これはより詳細度の低い規則によって定義された counter-set を上書きするために使用することができます。

公式定義

初期値none
適用対象すべての要素
継承なし
計算値指定通り
アニメーションの種類計算値の型による

形式文法

counter-set = 
  [ <counter-name> <integer>? ]+  |
  none

例

名前付きカウンターの設定

css
h1 {
  counter-set: chapter section 1 page;
  /* chapter および page のカウンターを 0 に、
     section カウンターを 1 に設定 */
}

仕様書

Specification
CSS Lists and Counters Module Level 3
# propdef-counter-set

ブラウザーの互換性

BCD tables only load in the browser

関連情報