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