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

counter-reset プロパティ

 counter-reset プロパティは、番号付けに利用するプロパティで、値をリセットします。値を初期化することもできます。
 初期化には counter-set プロパティがありますが Safari ブラウザで使用できません。こちらの counter-reset プロパティを使用したほうが無難でしょう。

 counter-reset プロパティは、counter-incrementcounter() 関数と併用します。
 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( example_counter ) "項";
}

ページ内 Index

構文(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 プロパティはエレメントに設定しています。