CSS3

：

プロパティ

：

counter-reset

　編集：2022.07.13 by T.A.

[Edge]○。→●、mdn

カウンターの初期化。

名前 counter-reset
値 [<counter-name> <integer>? | <reversed-counter-name> <integer>?]+ |
none
初期値 none
適用対象 すべての要素
継承 されない
百分率 受容しない
算出値 キーワード none／各アイテムが識別子と整数のペアであるリスト
正準的順序 文法に従う
アニメーション型 算出された値型による

要素上で新たなカウンター（たち）をインスタンス化して、指定された整数値に設定する。

[<counter-name> <integer>? | <reversed-counter-name> <integer>?]+
<counter-name> <integer>?
所与の（<counter-name>、<integer>）を（名前、値）に伴うカウンターをインスタンス化する。<integer> が省略された場合の既定の値は、0 になる。

<counter-name> は、その名前を <custom-ident> として表現する。キーワード none は値として無効になる。

以下のCSSが組み込んであります： 

<SPAN class=Test>SPAN</SPAN><BR>
<SPAN class="Test _inc">SPAN</SPAN><BR>
<SPAN class="Test _inc">SPAN</SPAN><BR>
<SPAN class="Test _resM2">SPAN</SPAN><BR>
<SPAN class="Test _inc">SPAN</SPAN><BR>
<SPAN class="Test _inc">SPAN</SPAN><BR>
<SPAN class="Test _resP2">SPAN</SPAN><BR>
<SPAN class="Test _inc">SPAN</SPAN><BR>
<SPAN class="Test _inc">SPAN</SPAN><BR>

<reversed-counter-name> <integer>?
所与の（<counter-name>、<integer>）を（名前、値）に伴う逆順にされたカウンターをインスタンス化する。<integer> が省略された場合【の既定の値は、インスタンス化を見よ】。
none
要素は、新たなカウンターを作成しない。

カウンター プロパティは、カスケード法の規則に通常どおり従うことに注意。したがって、例えば次のスタイルシートは： 

h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }

これは imagenum のみを設定し直すことになる。両カウンタとも設定し直すためには、以下のように一緒に指定される必要がある： 

H1 { counter-reset: section -1 imagenum 99 }

同じ原則は［counter-set／counter-increment］プロパティにも適用される。 [css-cascade-4] を見よ。

counter-reset の値に同じ <counter-name> が複数回生じた場合、最後のもののみ尊守される。

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：