counter-resetプロパティ

TOPページに戻る > CSS

counter-resetプロパティ

要素に付けたカウンターの番号をリセットできます
値にリセットするカウンターの名前を指定するとカウンター番号をリセットできます
カウンター名の次に半角空白で区切って、数字を指定するとカウンターの初期値を指定することができます
初期値は省略できます。その場合、1からカウンター数字が始まります
※IE6、IE7は未対応、IE8から対応しています

使い方（書式）

セレクタ { counter-reset: カウンター名 初期値; }           

ccounter-resetプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	しない

プロパティの値	説明
カウンター名	リセットするカウンター名前を指定します
初期値	カウンターの始まる数を指定。数値の指定を省略した場合は1から始まります
none	カウンターリセットなし

実際の指定方法

.hogebox {
 counter-reset: hogecounter; /* 親要素にカウンターリセットをつけました */
  }
.hoge {
 counter-increment: hogecounter;  /* hogeカウンターを作りました */
  }
.hoge:before {
 content: counter(hogecounter);   /* hogeカウンターを要素の先頭に表示 */
  }

html部分

<p class="hoge">　1番目</p>
<p class="hoge">　2番目</p>
<p class="hoge">　3番目</p>
<div class="hogebox">
<p class="hoge">　4番目　ここでカウンターリセット</p>
<p class="hoge">　5番目</p>
<p class="hoge">　6番目</p>
</div>

実際の表示　counter-increment: hogecounter;

　hogeカウンター1番目

　hogeカウンター2番目

　hogeカウンター3番目