counter-reset

CSScounter-reset プロパティは、 CSS カウンターを、与えられた値に初期化します。

メモ: カウンターの値は CSS の counter-increment プロパティを使用して増加させたり減少させたりすることができます。

構文

/* "my-counter" を 0 に設定 */
counter-reset: my-counter;

/* "my-counter" を -1 に設定 */
counter-reset: my-counter -1;

/* "counter1" を 1 に、 "counter2" を 4 に設定 */
counter-reset: counter1 1 counter2 4;

/* より詳細度が低い規則による値の初期化をキャンセル */
counter-reset: none;

/* グローバル値 */
counter-reset: inherit;
counter-reset: initial;
counter-reset: unset;

counter-reset プロパティは、以下のうちの一つで指定します。

  • カウンターの名前を指定する <custom-ident> と、その後に任意で <integer>。名前又は名前と数値の組み合わせを空白で区切ることで、初期化させるカウンターを好きなだけ指定することができます。
  • キーワード値 none

<custom-ident>
初期化の対象となる、カウンターの名前です。
<integer>
要素が出現するごとに、カウンターを初期化するための値です。与えられない場合、初期値の 0 なります。
none
カウンターの初期化は行われません。これはより詳細度の低い規則によって定義された counter-reset を上書きするために使用することができます。

形式文法

[ <custom-ident> <integer>? ]+ | none

h1 {
  counter-reset: chapter section 1 page;
  /* chapter と page カウンターを 0 に、
     section カウンターを 1 に設定します。 */
}

仕様書

仕様書 状態 備考
CSS Lists Module Level 3
counter-reset の定義
草案 変更なし
CSS Level 2 (Revision 1)
counter-reset の定義
勧告 初回定義
初期値none
適用対象すべての要素
継承なし
メディアすべて
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
counter-resetChrome 完全対応 2Edge 完全対応 12Firefox 完全対応 1IE 完全対応 8Opera 完全対応 9.2Safari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 25Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報