counter()

counter() は CSS の関数で、指定された名前付きカウンターの現在値があれば、その文字列を返します。擬似要素において用いるのが多いものの、理論的には<string>に対応するすべての箇所で用いることができます。

/* 単純な使用法 */
counter(countername);

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

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

注: counters() 関数は CSS プロパティとも併用できますが、 content 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。

ブラウザーの互換性の表を注意深く確認してから本番環境に用いてください。

構文

値

<custom-ident>
カウンターを識別する名前であり、counter-reset および counter-increment に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ2つで始めることはできず、また none, unset, initial, inherit という名前は禁止です。
<counter-style>
カウンタースタイル名または symbols() 関数です。カウンタースタイル名には numeric, alphabetic, symbolic などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の定義済みカウンタースタイルがあります。省略された場合は、既定で decimal になります。

形式文法

counter( <custom-ident>, <counter-style>? )
ここで
<counter-style> = <counter-style-name> | symbols()
ここで
<counter-style-name> = <custom-ident>

例

既定値と upper-roman との比較

HTML

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

CSS

ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::after {
  content: "[" counter(listCounter) "] == ["
               counter(listCounter, upper-roman) "]";
}

結果

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

HTML

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

CSS

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::after {
  content: "[" counter(count, decimal-leading-zero) "] == ["
               counter(count, lower-alpha) "]";
}

結果

仕様書

仕様書 状態 備考
CSS Lists Module Level 3
CSS Counters の定義		 草案 変更なし
CSS Level 2 (Revision 1)
CSS Counters の定義		 勧告 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報