CSS Reference

counter-set

カウンター値をセットする

counter-set プロパティは、既存のカウンターの値を操作するためのプロパティです。カウンターは、要素ごとに増加する数値やインデックスを管理するためのもので、リストの番号付けやステップ番号の表示などで使用されます。

counter-set プロパティは、指定された名前のカウンターが要素上にまだ存在しない場合にのみ、新しいカウンターを作成します。

指定できる値は下記の通りです。

none 要素はどのカウンターの値もセットしません。（既定値）
<counter-name> <integer>? 指定されたカウンターの値を設定します。<counter-name> は設定するカウンターの名前、<integer> はそのカウンターに設定する値です。
<integer> は <integer> データ型の値で指定し、指定を省略した場合は 0 と解釈されます。
この指定は、複数の組み合わせを空白で区切って指定することもできます。

counter-setの仕様

初期値
  • none
対象となる要素
  • すべての要素
継承
  • なし

counter-setのサンプルソース

<style>
  body {
    counter-reset: item; /* "item" というカウンターを初期化 */
  }
  .start-new {
    counter-set: item 5; /* "item" カウンターを5に設定 */
  }
  .start-new::before {
    content: "Item " counter(item); /* カウンターの値を表示 */
  }
</style>
<body>
  <div class="start-new">Item Start</div> <!-- Item 5 -->
</body>
/* <integer> を省略した指定の解釈 */
counter-set: chapter section 1 page;
/* counter-set: chapter 0 section 1 page 0; と同じ意味 */

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome