counter-resetプロパティは、counter-incrementプロパティでセットした<識別子>に該当するカウンタをリセットします。
このプロパティは、contentプロパティの値に<カウンタ>を指定した場合に使用できます。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

[<識別子> <整数>?]+｜none｜inherit

初期値

none

適用される要素

全ての要素

継承

します

パーセント値

N/A

メディア

all

値の解説

[<識別子> <整数>?]+

counter-incrementプロパティでセットしたカウンタ名（識別子）と同じカウンタ名を入れると、指定した要素が出現した場所でリセットされます。
リセットしたいカウンタが複数ある場合は、counter-reset: h2count ulcount;のように空白類文字で区切って書きます。

<整数>は、カウンタをいくつにリセットするかを示し、デフォルト値は0になっておりマイナス値の指定可能です。なお、この値はオプションのため省略する事もできます。

none

カウンタをリセットしません。

counter-resetのサンプル

<div class="sample01">
<h3>タイトル</h3>
<p>text</p>
<h3>タイトル</h3>
<p>text</p>
<h3>タイトル</h3>
<p>text</p>
<h3>タイトル</h3>
<p>text</p>
<h3>タイトル</h3>
<p>text</p>
<h3>タイトル</h3>
<p>text</p>
</div>

<div class="sample02">
<h3>タイトル</h3>
<p>text</p>
<h4>h4 タイトル</h4>
<p>text</p>
<h4>h4 タイトル</h4>
<p>text</p>
<h4>h4 タイトル</h4>
<p>text</p>
<h3>タイトル</h3>
<p>text</p>
<h4>h4 タイトル</h4>
<p>text</p>
<h4>h4 タイトル</h4>
<p>text</p>
</div>

div.sample02,
div.sample01 {
  float: left;
  width: 240px;
  margin: 20px;
  padding: 15px;
  border: 1px solid #999;
}

div.sample02 {
  margin-left: 0;
}

div.sample01 h3 {
  counter-increment: section 10;
}

div.sample01 h3:nth-of-type(4) {
  counter-reset: section;
}

div.sample01 h3:before {
  content: counter(section) ". ";
}


div.sample02 h3 {
  counter-increment: h3count;
  counter-reset: h4count;
}

div.sample02 h3:before {
  content: "[" counter(h3count) "] ";
  color: #fcc;
}

div.sample02 h4 {
  counter-increment: h4count;
}

div.sample02 h4:before {
  content: "[" counter(h3count) "-" counter(h4count) "] ";
  color: #900;
}

ちょっとCSSソースが長くなりましたが、最初のdiv.sample01のサンプルでは:nth-of-type()疑似クラスを使い、4番目のh3要素でカウンタをリセットしています。
二つ目のdiv.sample02は、h3要素が出現する度にh4要素のカウンタをリセットしています。また、カウンタの色も変更しています。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

タイトル

text

タイトル

text

タイトル

text

タイトル

text

タイトル

text

タイトル

text

タイトル

text

h4 タイトル

text

h4 タイトル

text

h4 タイトル

text

タイトル

text

h4 タイトル

text

h4 タイトル

text