概要

CSSプロパティ｢counter-reset｣は、カウンタの値を指定した値を初期化する際に使用します。

<section>
  <p class="title reset">大吉</p>
  <p class="title reset">中吉</p>
  <p class="title reset">小吉</p>
</section>
<section>
  <p class="title">大吉</p>
  <p class="title">中吉</p>
  <p class="title">小吉</p>
</section>
<style>
section {
  border: 1px solid;
  margin-bottom: 5px;
  padding-left: 5px;
}
.reset {
  counter-reset: item;
}
.title {
  counter-increment: item;
}
.title::before {
  content: counter(item) '. ';
}
</style>

取りうる値

リセットしたいカウンタ名を指定します。また複数指定することもできます。更に、整数値はリセット後の数値を指定します。マイナスの値も指定できます。

{ counter-reset: カウンタ名 数値}
{ counter-reset: カウンタ名1 カウンタ名2 数値}

指定可能な内容と説明です。

値	説明
none	初期値です。カウンタを進めません
カウンタ名	指定したカウンタを１つ進めます
カウンタ名 整数値	指定した数値の分だけ前後します

使用例

content プロパティの ｢counters()｣関数、と counter-reset プロパティを使うことで、下記のような入れ子の数値を表示させることも可能です。

<ol>
  <li>項目</li>
  <li>項目
    <ol>
      <li>項目</li>
      <li>項目</li>
      <li>項目
        <ol>
          <li>項目</li>
          <li>項目</li>
        </ol>
      </li>
      <li>項目</li>
    </ol>
  </li>
  <li>項目</li>
  <li>項目</li>
</ol>
<style>
ol {
  counter-reset: item;
  list-style: none;
  padding: 3px;
}
li {
  color: #000;
  display: block;
  background: #ddd;
  margin:5px;
  padding:5px;
}
li:before {
  content: counters(item, "-")". ";
  counter-increment: item;
}
</style>

仕様書

• CSS Level 2 (Revision 1)

関連CSSプロパティ

• counter-increment
• counter-reset