"Section 1", "1.1", "1.2" のようなセクションおよびサブセクションへの付番方法：
body
{
counter-reset: section;
}
h1
{
counter-reset: subsection;
}
h1:before
{
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2:before
{
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
Try it Yourself ❯
counter-reset プロパティは、1 つ以上のカウンタを作成またはリセットします。
counter-reset プロパティは、通常 counter-increment および content プロパティと一緒に使用します。
| デフォルト値： | なし |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | 不可。animatable を参照 |
| バージョン： | CSS2 |
| JavaScript 構文： | object.style.counterReset="section" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
注: IE8は、!DOCTYPE を指定した場合のみ counter-reset プロパティをサポートします。
counter-reset: none|name number|initial|inherit;
| 値 | 説明 |
|---|---|
| なし | デフォルト値。カウンタをリセットしません |
| name | name は、リセットするカウンタを定義します |
| number | id は、リセットするカウンタを定義します。 number は、セレクタの出現毎に設定するカウンタの値を設定します。デフォルトのリセット値は 0 です |
| initial | プロパティにデフォルト値を設定します。initial を参照 |
| inherit | このプロパティは親要素を継承します。inherit を参照 |
CSSリファレンス：:before pseudo element
CSSリファレンス：:after pseudo element
CSSリファレンス：content プロパティ
CSSリファレンス：counter-increment プロパティ
HTML DOM リファレンス：counterReset プロパティ