counters()

試してみましょう

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

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

<ol>
  <li>Mars</li>
  <li>
    Saturn
    <ol>
      <li>Mimas</li>
      <li>Enceladus</li>
      <li>
        <ol>
          <li>Voyager</li>
          <li>Cassini</li>
        </ol>
      </li>
      <li>Tethys</li>
    </ol>
  </li>
  <li>
    Uranus
    <ol>
      <li>Titania</li>
    </ol>
  </li>
</ol>

構文

/* 単純な使用法 - スタイルは既定で 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> で区切ったものです。

形式文法

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

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

<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

<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

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

<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

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 カウンターの使用
• counter-set プロパティ
• counter-reset プロパティ
• counter-increment プロパティ
• @counter-style アットルール
• CSS の counter() 関数
• ::marker 擬似要素
• CSS リストとカウンターモジュール
• CSS カウンタースタイルモジュール
• CSS 生成コンテンツモジュール