W3G

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要素に指定されているカウンタ（連番）がリセット（初期化）される仕組みです。