counter-reset プロパティ
counter-reset プロパティは、番号付けに利用するプロパティで、値をリセットします。値を初期化することもできます。
初期化には counter-set プロパティがありますが Safari ブラウザで使用できません。こちらの counter-reset プロパティを使用したほうが無難でしょう。
counter-reset プロパティは、counter-increment、counter() 関数と併用します。
counter() 関数は ::before や ::after といった疑似エレメントのcontent プロパティに設定します。
counter-resetプロパティは親エレメントに、counter() 関数は ::before や ::after といった疑似エレメントのcontentプロパティに、counter-incrementプロパティはエレメントまたは疑似エレメントに指定します。
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 プロパティはエレメントに設定しています。