CSS3

プロパティ

counter-set

→●、mdn

カウンターのセット。

ユーザー エージェントには、視覚的でないものも含む すべての媒体に対し、これらのプロパティをサポートすることが期待される。

counter-set プロパティは、既存のカウンター（たち）の値を操作する。それに先立って、要素上に所与の名前のカウンターが無い場合に限り、その名前のカウンターをインスタンス化する。

[<counter-name> <integer>?]+ ⤴

<counter-name> の【最内縁な】カウンタの値を指定された <integer> に設定する。

<integer> 省略時の既定は 0 に設定する。

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

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

.Test::before{
	content:counter(CNT);
	color:red;
}
._inc{
	counter-increment:CNT;
}
._setM1{
	counter-set:CNT -1;
}
._set10{
	counter-set:CNT 10;
}

<SPAN class=Test>SPAN</SPAN><BR>
<SPAN class="Test _inc">SPAN</SPAN><BR>
<SPAN class="Test _inc">SPAN</SPAN><BR>
<SPAN class="Test _setM1">SPAN</SPAN><BR>
<SPAN class="Test _inc">SPAN</SPAN><BR>
<SPAN class="Test _inc">SPAN</SPAN><BR>
<SPAN class="Test _set10">SPAN</SPAN><BR>
<SPAN class="Test _inc">SPAN</SPAN><BR>
<SPAN class="Test _inc">SPAN</SPAN><BR>

SPAN
SPAN
SPAN
SPAN
SPAN
SPAN
SPAN
SPAN
SPAN

none ⤴

要素は、どのカウンターの値も改めない。

h1::before {
    content: "第 " counter(章) " 章. ";
    counter-increment: 章;  /*  章 に 1 を加算する  */
    counter-reset: 節;      /*  節 を 0 に設定する  */
}
h2::before {
    content: counter(章) "." counter(節) " 節. ";
    counter-increment: 節;
}

プロパティの値に同じ <counter-name> が複数回生じた場合、それらは、現れた順に処理される ― すなわち ：

関連

counter-reset、counter-increment、counter()。

テスト