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-setCSS のプロパティで、CSS カウンターを指定された値に設定します。

そのカウンターが存在しない場合、counter-setプロパティは、空白で区切られたカウンターと値のペアのリストに名前付きカウンターが含まれている場合、新しいカウンターを作成します。しかし、新しいカウンターを作成するには、 counter-reset プロパティを使用することをお勧めします。

リストに含まれている名前付きカウンターに値が設定されていない場合、そのカウンターの値は 0 に設定されます。

試してみましょう

メモ: カウンターの値は 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: revert-layer;
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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
counter-set
list-item
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報