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