counter-increment プロパティ
counter-increment プロパティは、番号付けに利用するプロパティです。値を増減して番号付けに利用することができます。
<h2>〜<h5> で番号付けが必要なときに、手入力で番号付けしなくても counter-* プロパティ、::before や ::after といった疑似エレメントの content プロパティと counter() 関数で自動で番号付けが可能になります。
counter-increment プロパティは、counter-reset、counter() 関数と併用します。
counter-resetプロパティは親エレメントに、counter() 関数は ::before や ::after といった疑似エレメントのcontentプロパティに、counter-increment プロパティはエレメントまたは疑似エレメントに指定します。
ページ内 Index
構文(Syntax)
CSS
DOM ( JavaScript )
値(Values)
Value | 摘要 |
---|---|
none | 初期値(default値) |
id number | 通常は1つずつ増加します。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 プロパティはエレメントに設定しています。