counter-increment

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

counter-increment は CSS のプロパティで、指定された値によって CSS カウンターの値を増加または減少させたり、すべてのカウンターまたはここのカウンターが変化することを防いだりするためのプロパティです。

空白で区切られたカウンターと値のリストに掲載されている名前付きカウンターが存在しない場合、作成されます。カウンターのリストでカウンターに値が指定されていない場合、カウンターは 1 だけ増加します。

カウンターの値は CSS の counter-reset プロパティを使用して任意の値にリセットすることができます。

試してみましょう

counter-increment: example-counter;

counter-increment: example-counter 0;

counter-increment: example-counter 5;

counter-increment: example-counter -5;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Counter value:</div>
</section>

#default-example {
  text-align: left;
  counter-reset: example-counter;
}

#example-element::after {
  content: counter(example-counter);
}

構文

css

/* "my-counter" を 1 増加 */
counter-increment: my-counter;

/* "my-counter" を 1 減少 */
counter-increment: my-counter -1;

/* "counter1" を 1 増加、 "counter2" を 4 減少 */
counter-increment: counter1 counter2 -4;

/* "page" を 1 増加、"section" を 2 増加、"chapter" は変化しない */
counter-increment: chapter 0 section 2 page;

/* 増加または減少させない。より詳細度が低いルールを上書きするために使用 */
counter-increment: none;

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

値

counter-increment プロパティは、空白で区切られている <custom-ident> として指定されたカウンター名のリストと、オプションで <integer> 値、またはキーワード none のどちらかを値として受け取ります。増加するカウンターは、名前または名前と数値の組み合わせを空白で区切って、いくつでも指定することができます。

<custom-ident>: 増加または減少させるカウンターの名前です。
<integer>: カウンタに加算する値を指定します。整数に - 符号を付けると、その値がカウンターから減算されます。値が指定されていない場合、既定では 1 です。
none: カウンターを増加または減少させる必要がないことを示します。この値は、特定のルールでカウンターが増加または減少するのをすべてキャンセルする場合にも使用することができます。これはプロパティの既定値です。

メモ: none 値を指定すると、このルールが適用される選択された要素のすべてのカウンターの増減が防止されます。特定のカウンターの増減のみを防止するには、関連するカウンターの integer 値を 0 に設定してください。

公式定義

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

形式文法

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

例

カウンター値の減少

この例では、逆順に数える一連の数値を表示します。そのために、 100 から始めて、その時点ごとに 7 ずつ減少する数値を表示するカウンターを使用します。

HTML

html

<div>
  <i></i><i></i><i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i
  ><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>

CSS

sevens という名前のカウンターの初期値を 100 にするために、counter-reset を使用します。次に、それぞれの <i> に対して、カウンターを 7ずつ減らします。

最初の値を 100 に設定するには、 :first-of-type 擬似クラスを使用して最初の <i> 要素を特定し、 counter-increment: none; を設定します。さらに、 content プロパティを ::before 擬似要素で使用して、 counter() 関数を使用してカウンターの値を表示します。

css

div {
  counter-reset: sevens 100;
}
i {
  counter-increment: sevens -7;
}
i:first-of-type {
  counter-increment: none;
}
i::before {
  content: counter(sevens);
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
  width: 200px;
}
i {
  flex: 0 0 2em;
}

結果

カウンターを作成し、値を 100 に設定するために counter-reset （または counter-set）を使用しなかった場合でも、 sevens カウンターは作成されますが、初期値は 0 になります。

仕様書

Specification
CSS Lists and Counters Module Level 3 # increment-set