counter-set

CSS属性counter-setは,CSS計数を指定した値に設定します。当属性は存在する計数を操作し,新しい計数を作成するのは指定された名前の計数が要素に未だ存在しない場合のみです。

注意: 計数値の増減分にはCSS属性counter-incrementを用いることもできます。

構文

/* "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: unset;

counter-set属性には次の内どれかを指定します。

  • 計数名<custom-ident>に引き続く任意の<integer>。指定できる計数の個数に制限はなく,それぞれを空白で区切って指定します。
  • 予約語none

<custom-ident>
設定する計数名。
<integer>
この値が,〔当CSSが規則を適用する〕要素が現れる度に計数を設定します。指定なき場合の既定値は0です。指定した名前の計数が現在要素に存在しない場合,その要素に指定された名前の計数を初期値0で新たに作成します(ただし,作成の後,速やかに他の値に設定又は増分されます)。
none
いかなる計数の設定も行いません。より詳細度の低い規則で定めたcounter-setを上書きするのに使えるでしょう。

形式文法

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

事例

h1 {
  counter-set: chapter section 1 page;
  /* "chapter"及び"page"計数を0に,
     "section"計数を1に設定 */
}

仕様書

仕様書 状態 備考
CSS Lists Module Level 3
counter-set の定義
草案 初期定義
初期値none
適用対象すべての要素
継承なし
計算値指定値
アニメーションの種類個別

ブラウザ互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
counter-setChrome 完全対応 85Edge 完全対応 85Firefox 完全対応 68IE 未対応 なしOpera 完全対応 71Safari 未対応 なしWebView Android 完全対応 85Chrome Android 完全対応 85Firefox Android 完全対応 68Opera Android 完全対応 60Safari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応

関連項目