CSS counter-resetプロパティ
例
セクションとサブセクションに番号を付ける方法(例:"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) " ";
}
試してみる »
プロパティの定義と使用説明
counter-reset プロパティは、1 つまたは複数のカウンターを作成またはリセットします。
counter-reset プロパティは通常、counter-increment プロパティ、content プロパティと一緒に使用されます。
| 初期値: | none |
|---|---|
| 継承: | no |
| バージョン: | CSS2 |
| JavaScript 構文: | object.style.counterReset="subsection" |
ブラウザサポート
![]()
![]()
![]()
![]()
![]()
すべての主要ブラウザは counter-reset プロパティをサポートしています。
注意:IE8 は !DOCTYPE を指定した場合のみ counter-reset プロパティをサポートします。
プロパティ値
| 值 | 説明 |
|---|---|
| none | 初期値。セレクターのカウンターをリセットできません。 |
| id number | id カウンターをリセットするセレクター、id または class を定義します。 number このセレクターの出現回数のカウンター値を設定できます。正の数、ゼロ、負の数のいずれかです。 |
| inherit | 親要素から counter-reset プロパティの値を継承することを指定します。 |
関連記事
CSS reference: :before 疑似要素
CSS reference: :after 疑似要素
CSS reference: content プロパティ
CSS reference: counter-increment プロパティ
その他の拡張