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

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

試してみましょう

counter-set: none;

counter-set: chapter-count 0;

counter-set: chapter-count;

counter-set: chapter-count 5;

counter-set: chapter-count -5;

<section class="default-example" id="default-example">
  <div class="transition-all" id="chapters">
    <h1>Alice's Adventures in Wonderland</h1>
    <h2>Down the Rabbit-Hole</h2>
    <h2 id="example-element">The Pool of Tears</h2>
    <h2>A Caucus-Race and a Long Tale</h2>
    <h2>The Rabbit Sends in a Little Bill</h2>
  </div>
</section>

#default-example {
  text-align: left;
  counter-set: chapter-count;
}

#example-element {
  background-color: #37077c;
  color: white;
}

h2 {
  counter-increment: chapter-count;
  font-size: 1em;
}

h2::before {
  content: "Chapter " counter(chapter-count) ": ";
}

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