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.
試してみましょう
メモ:
カウンターの値は 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;
/* 増加または減少させない。より詳細度が低い規則を上書きするために使用 */
counter-increment: none;
/* グローバル値 */
counter-increment: inherit;
counter-increment: initial;
counter-increment: revert;
counter-increment: unset;
counter-increment
プロパティは、以下の何れかで指定します。
- カウンターの名前を指定する
<custom-ident>
と、その後に任意で<integer>
。カウンターはいくつでも指定することができ、それぞれの名前や名前と数値の組は空白で区切ります。 - キーワード値
none
。
値
<custom-ident>
-
増加の対象となる、カウンターの名前です。
<integer>
-
カウンタに加える値です。指定されない場合は既定値の
1
になります。 none
-
カウンターは増加しません。これは既定値として使用されたり、より詳細度の高いルールで増加を取り消したりするために使用されたりします。
公式定義
初期値 | none |
---|---|
適用対象 | すべての要素 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 計算値の型による |
形式文法
例
名前付きカウンターの増加
css
h1 {
counter-increment: chapter section 2 page;
/* chapter と page カウンターの値を 1、
section カウンターの値を 2 増加させます。 */
}
仕様書
Specification |
---|
CSS Lists and Counters Module Level 3 # increment-set |
ブラウザーの互換性
BCD tables only load in the browser