【counter-reset】連番をリセットする

counter-resetプロパティでは、contentプロパティで追加する連番(カウンタ)の値をリセットすることができます。

counter-resetプロパティを設定した要素が出現するたびに、カウンタがリセットされます。 このプロパティはcontentプロパティのcounter()関数、あるいはcounters()関数と併せて使用します。

またcounter-incrementプロパティを使用し連番の値を進める場合は、初めにcounter-resetプロパティでカウンタをリセットする必要があるようです。 そのため、親ボックス、またはbody要素に対してcounter-resetを指定することが多いようです。

※最初にcounter-resetをしない場合は、連番は表示はされますが、きちんと数字が進まないようです。

なお「:before」擬似要素や「:after」擬似要素に対してのcounter-resetは適用されないようなので注意して下さい。

書式

  • counter-reset : ……… 連番(カウンタ)をリセットする

★:カウンタ名、カウンタ名 整数値、none、inherit

カウンタ名
値をリセットしたいカウンタの名前(counter-incrementで設定した任意の名前)を指定します。カウンタ名のみを指定した場合、カウンタが「0」にリセットされます。なお、異なる名前の複数のカウンタを半角スペースで区切って指定することも可能です。
カウンタ名 整数値
カウンタ名の後に半角スペースで区切って整数値を指定すると、カウンタの値がその数にリセットされます。
none
カウンタの値をリセットしません

使用した時の例

body {counter-reset: sample00 sample11;}
 
.sample:before {
  content: counter(sample00);
  counter-increment: sample00;
}
 
/* ★★下記は応用となります★★ */
h4:before {
  content: "第" counter(sample11) "章 ";
  counter-increment: sample11;
}
h4 {counter-reset: sample22;}
h5:before {
  content: counter(sample11) "-" counter(sample22) " ";
  counter-increment: sample22;
}
<div class="sample">sample</div>
<div class="sample">sample</div>
<div class="sample">sample</div>
 
<h4>HTMLの基本</h4>
  <h5>HTMLとは</h5>
  <h5>HTMLの書き方</h5>
<h4>CSSの基本</h4>
  <h5>CSSとは</h5>
  <h5>CSSの書き方</h5>

ブラウザ上の表示例

sample
sample
sample

HTMLの基本

HTMLとは
HTMLの書き方

CSSの基本

CSSとは
CSSの書き方

対応ブラウザなどのデータ

初期値 none 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual / content
対応ブラウザ Internet Explorer8~ , Google Chrome2~ , Firefox1~ , Opera9.2~ , Safari4~

関連情報