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> に対応するすべての箇所で用いることができます。

試してみましょう

構文

css
/* 単純な使用法 */
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-romanlower-alpha のリストスタイルを使用してカウンターを表示します。

HTML

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

CSS

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

結果

3 つのスタイルを使用したカウンターの表示

この例では、 counter() 関数を 3 回使用しています。

HTML

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

CSS

私たちは、既定の小数点値を含む 3 種類の異なるカウンタースタイルを持つ counter() 関数を追加しました。長い ::marker 文字列のための空白を確保するために、リストにパディングを追加しました。

css
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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
counter()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報