counter()

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

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

/* 計数の表示を変更する */
counter(countername, upper-roman);

計数自身は視覚的効果を何一つ持っていません。counter() 関数 (および counters() 関数) を用いることで、開発者が定めた文字列 (または画像) が表示され、計数は便利になるのです。

注意: counter() 関数は CSS 属性とも併用できますが、counter() 以外の属性における対応は実験的であり、型または単位引数への対応は疎らです。

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

構文

<custom-ident>
計数を識別する名前であり、counter-reset および counter-increment に用いる名前と、大小文字区別して同一でなくてはなりません。2 つの連字符で始まったり、noneunsetinitial、または inherit という名前は禁止です。
<counter-style>
計数様式名又は symbol() 関数。ここで計数様式名とは、単純な数字・英語・又は記号か、複雑な手書き東亜・エチオピア文字、もしくは他の定義済み計数様式です。省略時の既定は十進数です。

形式文法

counter( <custom-ident>, <counter-style>? )

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

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

既定値と大ローマ数字との比較

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) "]";
}

結果

0 埋め十進数と英小文字との比較

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 の定義
勧告 初回定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
counter()Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 8Opera 完全対応 9.2Safari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連項目