counter()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
counter()
は CSS の関数で、指定された名前付きカウンターの現在値があれば、その文字列を返します。
counter()
関数は、ふつうは擬似要素の中の content
で用いることが多いものの、理論的には <string>
に対応するすべての箇所で用いることができます。
試してみましょう
構文
/* 単純な使用法 */
counter(counter-name);
/* カウンターの表示の変更 */
counter(counter-name, upper-roman)
カウンター自身には視覚的効果が何もありません。 counter()
関数 (および counters()
関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。
値
counter()
関数は、最大 2 つの引数を受け入れます。最初の引数は <counter-name>
です。 2 番目の引数はオプションで、 <counter-style>
です。
<counter-name>
-
カウンターを識別する
<custom-ident>
であり、counter-reset
およびcounter-increment
に用いた名前と同じもので、大文字小文字を区別します。カウンター名は名前をダッシュ 2 つで始めることはできず、またnone
,unset
,initial
,inherit
という名前にすることはできません。 <counter-style>
-
<list-style-type>
名、<@counter-style>
名、symbols()
関数の何れかです。カウンタースタイル名にはnumeric
,alphabetic
,symbolic
などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の定義済みカウンタースタイルがあります。省略された場合は、既定でdecimal
になります。
メモ:
入れ子になったカウンターの値を結合する場合は、 counters()
関数を使用します。こちらは追加の <string>
引数があります。
形式文法
<counter()> =
counter( <counter-name> , <counter-style>? )
<counter-style> =
<counter-style-name> |
<symbols()>
<symbols()> =
symbols( <symbols-type>? [ <string> | <image> ]+ )
<symbols-type> =
cyclic |
numeric |
alphabetic |
symbolic |
fixed
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
例
lower-roman と lower-alpha の比較
この例では、 lower-roman
と 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, lower-roman) "] == ["
counter(count, lower-alpha) "]";
}
結果
3 つのスタイルを使用したカウンターの表示
この例では、 counter()
関数を 3 回使用しています。
HTML
<ol>
<li></li>
<li></li>
<li></li>
</ol>
CSS
私たちは、既定の小数点値を含む 3 種類の異なるカウンタースタイルを持つ counter()
関数を追加しました。長い ::marker
文字列のための空白を確保するために、リストにパディングを追加しました。
ol {
counter-reset: listCounter;
padding-left: 5em;
}
li {
counter-increment: listCounter;
}
li::marker {
content:
"Item #" counter(listCounter) " is: ";
}
li::after {
content:
"[" counter(listCounter, decimal-leading-zero) "] == ["
counter(listCounter, upper-roman) "]";
}
結果
仕様書
Specification |
---|
CSS Lists and Counters Module Level 3 # counter-functions |
CSS Counter Styles Level 3 # extending-css2 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS カウンターの使用
counter-reset
counter-set
counter-increment
@counter-style
- CSS の
counters()
関数 - CSS リストとカウンターモジュール
- CSS カウンタースタイルモジュール
- CSS 生成コンテンツモジュール