CSS Reference

counters()

階層的なカウンター値を結合する

counters() 関数は、階層的なカウンター値を結合するために使用されます。例えば、入れ子構造になった順序リストで階層的な番号付けを表示したい場合に便利です。

counters() 関数の基本的な構文は下記のようになります。

counters( <counter-name>, <string>, <counter-style>? )

引数として以下の値をカンマ（,）で区切って指定できます。

<counter-name> カウンターの名前を指定します。
<string> 各階層を分ける区切り文字を指定します。例えば、ハイフン（-）を指定する場合は、"-" のように指定します。
<counter-style> decimal や lower-alpha などの定義済み、あるいは @counter-style 規則で独自に定義されたカウンタースタイルの名前、もしくは symbols() 関数を指定します。指定は任意で、省略された場合は decimal として扱われます。

例えば、以下のような HTML に対してカウンターを指定するとします。

<ol>
  <li>リスト項目1
    <ol>
      <li>入れ子になったリスト項目1</li>
      <li>入れ子になったリスト項目2</li>
    </ol>
  </li>
  <li>リスト項目2</li>
</ol>

以下のように、counters() 関数を使用することで、「入れ子になったリスト項目1」には (1.1)、「入れ子になったリスト項目2」には (1.2) のように、上位階層のリスト項目のカウンター値と、自身のカウンター値を、指定した区切り文字（以下の例ではピリオド（.））で結合して表示することができます。

li::marker {
  content: '(' counters(list-item, '.') ') ';
}

<!-- 表示例 -->
(1) リスト項目1
   (1.1) 入れ子になったリスト項目1
   (1.2) 入れ子になったリスト項目2
(2) リスト項目2

主要ブラウザの対応

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

関連するCSS関数

仕様書

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

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

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

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

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