counters()

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

counters() は CSS の関数により、カウンターが入れ子になっている場合にマーカーを組み合わせることができます。この関数は、指定された文字列と、存在する場合は名前付きで入れ子になったカウンターの現在の値を連結した文字列を返します。 3 番目はオプションの引数で、リストのスタイルを定義することができます。

counters() 関数は、ふつうは擬似要素の中の content で用いることが多いものの、理論的には <string> に対応するすべての箇所で用いることができます。

counters() 関数には counters(<name>, <string>) と counters(<name>, <string>, <style>) の 2 つの形があります。生成されるテキストは、 <name> で指定された名前のすべてのカウンターの値を、最も外側から内側に向けて並べ、指定された <string> で区切ったものです。カウンターは指定された <style> でレンダリングされ、<style> が指定されていない場合は decimal が既定値となります。

試してみましょう

ol {
  counter-reset: index;
  list-style-type: none;
}

li::before {
  counter-increment: index;
  content: counters(index, ".", decimal) " ";
}

<ol>
  <li>火星</li>
  <li>
    土星
    <ol>
      <li>ミマス</li>
      <li>エンケラドゥス</li>
      <li>
        <ol>
          <li>ボイジャー</li>
          <li>カッシーニ</li>
        </ol>
      </li>
      <li>テティス</li>
    </ol>
  </li>
  <li>
    天王星
    <ol>
      <li>ティタニア</li>
    </ol>
  </li>
</ol>

構文

css

/* 基本的な使用法 - スタイルは既定で decimal */
counters(counter-name, '.');

/* カウンターの表示の変更 */
counters(counter-name, '-', upper-roman)

カウンター自身には視覚的効果が何もありません。 counters() 関数（および counter() 関数）は開発者が定義したコンテンツを返すことで利用価値が生まれます。

値

counters() 関数は 2 つまたは 3 つの引数を受け付けます。最初の引数は <counter-name> です。 2 番目の引数は接続する <string> です。 3 番目の引数はオプションで、 <counter-style> です。

<counter-name>: カウンターを識別する <custom-ident> であり、counter-reset および counter-increment に用いた名前と同じもので、大文字小文字を区別します。カウンター名は名前をダッシュ 2 つで始めることはできず、また none, unset, initial, inherit という名前にすることはできません。また、インラインの単一利用のカウンターでは、 symbols() 関数を名前付きカウンターの代わりに利用することができます（symbols() に対応しているブラウザーの場合）。
<string>: 任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスでエンコードする必要があります。例えば \000A9 は著作権記号を表します。
<counter-style>: カウンタースタイル名または symbols() 関数です。カウンタースタイル名には numeric, alphabetic, symbolic などの定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の定義済みカウンタースタイルがあります。省略された場合は、既定で decimal になります。

返値は、その要素の <counter-name> という名前の CSS カウンターセット内にあるすべてのカウンターの値を、 <counter-style> で定義されたカウンタースタイル（省略した場合は decimal）で含む文字列です。返される文字列は、最も外側から内側に向けて並べ、指定された <string> で区切ったものです。

メモ: 結合前のカウンターについての情報は、 counter() 関数を参照してください。こちらは <string> を引数として取りません。

形式文法

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

<counter-name> = 
  <custom-ident>  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<counter-style-name> = 
  <custom-ident>  

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

例

既定のカウンター値と大文字のローマ数字との比較

この例には、 2 種類の counters() 関数が含まれます。 1 つは <counter-style> を設定しており、もう 1 つは既定値の decimal になります。

HTML

html

<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

CSS

css

ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content:
    counters(listCounter, ".", upper-roman) ") ";
}
li::before {
  content:
    counters(listCounter, ".") " == "
    counters(listCounter, ".", lower-roman);
}

結果

decimal-leading-zero と lower-alpha との比較

この例には、それぞれ異なる <string> および <counter-style> 値を持つ 3 つの counters() 関数が含まれます。

HTML

html

<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

CSS

css

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::marker {
  content:
    counters(count, "-", decimal-leading-zero) ") ";
}
li::before {
  content:
    counters(count, "～", upper-alpha) " == "
    counters(count,  "*", lower-alpha);
}

結果

仕様書

仕様書
CSS Lists and Counters Module Level 3 # counter-functions
CSS Counter Styles Level 3 # extending-css2

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年1月20日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告