counter-increment プロパティ
counter-increment プロパティは、番号付けに利用するプロパティです。値を増減して番号付けに利用することができます。
<h2>〜<h5> で番号付けが必要なときに、手入力で番号付けしなくても counter-* プロパティ、::before や ::after といった疑似エレメントの content プロパティと counter() 関数で自動で番号付けが可能になります。
counter-increment プロパティは、counter-reset、counter() 関数と併用します。
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) "項";
}
ページ内 Index
構文(Syntax)
CSS
counter-increment: none | id number | initial | inherit ;
DOM ( JavaScript )
String = object.style.counterIncrement;
object.style.counterIncrement=" none | id number | initial | inherit ";
値（Values）
| Value | 摘要 |
|---|---|
| none | 初期値（default値） |
| id number | 通常は１つずつ増加します。numberに-1を指定すると-1ずつ減少します。 |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | none |
| 継承（Inherited） | No |
| 変化（Animatable） | No |
Example
counter-incrementの例です。counter-increment プロパティは、counter-reset、counter() 関数が必要です。
counter-resetプロパティは親エレメント<div>に、counter() 関数は::before 疑似エレメントのcontentプロパティに設定しています。 ここでは、counter-increment プロパティはエレメントに設定しています。