W3G

counter-incrementプロパティの値

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

カウンタ名

自動的に1だけ値を進める

カウンタ名 整数値

指定された整数値の分ずつカウンタの値を進める

none

カウンタの値を進めない（初期値）

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

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

IE

◯：IE8よりサポート、IE6, 7は未サポート

Firefox

◯

Opera

◯

Chrome

◯

Safari

◯

iOS

◯

Android

◯

サンプル

h2 {
counter-increment : chapter ;
color : #136 ;
}
h2:before {
content : "第" counter(chapter) "章" ;
font-size : .7em ;
color : #666 ;
}
ol {
counter-reset : item ;
list-style : none ;
}
li { display: block ; }
li:before {
content: counters(item, ".") ". ";
counter-increment: item ;
}

カウンタは自身を入れ子にすることも可能です。その際は、counters( ) を使って一括指定を行います。同じカウンタ名のリストがネストされた入れ子構造のリストであれば、ネストされたリストに対して、「2.1.」「2.2.」「2.3.」「2.3.1」のように番号付けします。