counter-reset

counter-resetプロパティは、 1 つ以上の空白で区切られたカウンター名、またはキーワード none を受け付けます。カウンター名については、通常のカウンターは <counter-name> という形式を使用し、逆行カウンターは reversed(<counter-name>) を使用します。ここで、<counter-name> は、<custom-ident> または組み込みの <ol> カウンター用の list-item です。 オプションとして、各カウンター名に <integer> を続けることで、初期値を設定することができます。

<custom-ident>

<custom-ident> 形式を使用して、カウンター名を作成し初期化します。 reversed() 関数記法を使用すると、逆光カウンターを使用します。

<integer>

要素が出現するごとに、カウンターを初期化するための値です。与えられない場合、初期値の 0 なります。

none

カウンターの初期化は行われません。これはより詳細度の低い規則によって定義された counter-reset を上書きするために使用することができます。

counter-reset プロパティは、通常のカウンターと、対応しているブラウザーでは逆行カウンターの両方を生成することができます。通常のカウンターと逆行カウンターを、空白で区切って複数作成することができます。カウンターは、単独の名前、または空白で区切られた名前と値の組み合わせとすることができます。

より高い詳細度を持つセレクターで counter-increment: none を設定すると、より低い詳細度を持つセレクターで設定された名前付きカウンターの作成が上書きされます。

通常および逆行カウンターの既定の初期値により、最も一般的な 2 つの番号付けパターン、すなわち 1 から要素数までのカウントアップと、要素数から 1 までのカウントダウンは簡単に実装できます。名前付きカウンターにカウンター値を指定することで、カウンターをある整数値から始めて、カウントアップやカウントダウンをするようにすることができます。

通常のカウンターは、リセット値が提供されていない場合、 0 になっています。既定では、通常のカウンターは 1 つずつ増加しますが、 counter-increment で調整することができます。

h1 {
  /* "chapter" および "page" というカウンターを作成し、既定の初期値を設定する。
     カウンター "section" を作成し、 "4" に設定する。 */
  counter-reset: chapter section 4 page;
}

値なしで逆行カウンターを作成すると、設定した要素の個数と同じ数値でカウンターが開始し、設定した要素の最後の要素が 1 になるまでカウントダウンします。 既定では、逆順カウンターは 1 ずつ減っていきますが、counter-increment プロパティで変更することもできます。

h1 {
  /* 逆行カウンター "chapter" および "section" を作成する。
      "chapter" を要素数に設定し、 "section" を "10" に設定する。
      カウンター "pages" には既定の初期値を設定する。 */
  counter-reset: reversed(chapter) reversed(section) 10 pages;
}

順序付きリスト (<ol>) には、番号付けを制御できる組み込みの list-item カウンターが付いています。こうしたカウンターは、リストアイテムごとに自動的に 1 つずつ増減します。 counter-reset プロパティを使用して、 list-item カウンターをリセットすることができます。他のカウンターと同様に、 counter-increment プロパティを使用して、 list-itemカウンターの既定の増分値を上書きすることができます。

counter-reset = 
  [ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+  |
  none                                                

<reversed-counter-name> = 
  reversed( <counter-name> )  

この例では、 counter-reset プロパティを使用して、暗黙的な list-item カウンターの開始値を設定します。

HTML

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ol>

CSS

counter-reset を使用して、暗黙的な list-item カウンターを既定の 1 以外の値から開始するように設定します。

ol {
  counter-reset: list-item 3;
}

結果

counter-reset を使用して、暗黙的な list-item カウンターをすべての ol で 3 から数え始めるように設定します。そうすると、最初のアイテムは 4、2 つ目は 5 というように番号が振られます。これは、 HTML で <ol start="4"> と書くのと同じような効果です。

以下の例では、 'priority' という逆行カウンターを定義し、カウンターは 5 つのタスクに番号を振るために使用されています。

<ul class="stack">
  <li>Task A</li>
  <li>Task B</li>
  <li>Task C</li>
  <li>Task D</li>
  <li>Task E</li>
</ul>

@supports not (counter-reset: reversed(priority)) {
  .stack {
    display: none;
  }
  body::after {
    content: "このブラウザーは、まだ逆行カウンターに対応していません。";
  }
}

li::before {
  content: counter(priority) ". ";
  counter-increment: priority -1;
}

.stack {
  counter-reset: reversed(priority);
  list-style: none;
}

出力では、アイテムには 5 から 1 の逆順の番号が振られています。コードでは、カウンターの初期値を指定していません。ブラウザーは、レイアウト時にカウンターの増減する数値を使用して、初期値を自動的に計算します。

• CSS カウンターの使用
• counter-increment
• counter-set
• @counter-style
• counter() および counters() 関数
• content プロパティ
• ::marker 擬似クラス
• CSS リストとカウンターモジュール
• CSS カウンタースタイルモジュール