備忘録的プログラミングリファレンス

counter-resetプロパティ

 counter-resetプロパティは、番号付けに利用するプロパティで、値をリセットします。

 counter-resetプロパティは、counter-increment、counter()関数と併用します。
 counter関数は::beforeや::afterといった疑似エレメントのcontentプロパティに設定します。

 counter-resetプロパティは親エレメントに、counter()関数は::beforeや::afterといった疑似エレメントのcontentプロパティに、counter-incrementプロパティはエレメントまたは疑似エレメントに指定します。

example_counterをcounter-resetでリセット(Exampleを参照
parent_element {
	counter-reset: example_counter;
}

h3.counter::before {
	counter-increment: example_counter;
	content: "第" counter(mexample_counter) "項";
}

構文(Syntax)

CSS

counter-reset: none | name number | initial | inherit ;

DOM ( JavaScript )

値の取得
String = object.style.counterReset;
値の設定
object.style.counterReset =" none | name number | initial | inherit ";

値(Values)

Value摘要
none初期値(default値)
name numberカウンター名と初期値
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)none
継承(Inherited)No
変化(Animatable)No

Example

 counter-resetの例です。counter-resetプロパティは、counter-incrementプロパティ、counter()関数が必要です。

 counter-resetプロパティは親エレメント<div>に、counter()関数は::before疑似エレメントのcontentプロパティに設定しています。 ここでは、counter-incrementプロパティはエレメントに設定しています。