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.

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

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

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

試してみましょう

構文

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);
}

結果

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

仕様書

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

ブラウザーの互換性

関連情報