counter-reset

counter-resetプロパティは contentプロパティで追加されたカウンタ(連番)の値をリセット(初期化)するプロパティです。

  • カウンタ名
  • カウンタ名 整数値
  • none
  • inherit
初期値
none
適用対象
すべての要素
継承
しない
メディア
all

counter-resetプロパティの値

counter-resetプロパティに指定できる値はそれぞれ以下の意味を示します。

カウンタ名
自動的にカウンタの値を0にリセットする
カウンタ名 整数値
指定された整数値にカウンタをリセットする
none
カウンタの値をリセットしない(初期値)

カウンタ名は自由につけることが可能で、漢字やカタカナ、平仮名を入力することもできます。ただし、使える半角記号の文字種はハイフン(-)とアンダースコア(_)のみで、カウンタ名の最初を数字にすることはできない決まりです。カウンタの値を進めるには、counter-incrementプロパティの指定が必要です。

counter-resetプロパティの実装状況

IE
◯:IE8よりサポート、IE6, 7は未サポート
Firefox
Opera
Chrome
Safari
iOS
Android

サンプル

h2 {
counter-increment : chapter ;
counter-reset : section ;
color : #136 ;
}
h3 {
counter-increment : section ;
color : #36f ;
}
h2:before {
content : "第" counter(chapter) "章" ;
font-size : .7em ;
color : #666 ;
}
h3:before {
content : "第" counter(section) "節" ;
font-size : .6em ;
color : #999 ;
}

これは、h2要素が出現する度に、h3要素に指定されているカウンタ(連番)がリセット(初期化)される仕組みです。

Updated / Published