この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください!
この記事を English (US) で読むこともできます。

The counter() CSS function returns a string representing the current value of the named counter, if there is one. It is generally used with pseudo-elements, but can be used, theoretically, anywhere a <string> value is supported.

/* Simple usage */
counter(countername);

/* changing the counter display */
counter(countername, upper-roman)

A counter has no visible effect by itself. The counter() function (and counters() function) is what makes it useful by returning developer defined strings (or images).

Note: The counter() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.

Check the Browser compatibility table carefully before using this in production.

Syntax

Values

<custom-ident>
A name identifying the counter, which is the same case-sensitive name used for the counter-reset and  counter-increment. The name cannot start with two dashes and can't be none, unset, initial, or inherit.
<counter-style>
A counter style name or symbols() function, where a counter style name is a numeric, alphabetic, or symbolic simple predefined counter style, a complex longhand east Asian or Ethiopic predefined counter style, or other predefined counter style. If omitted, the counter-style defaults to decimal
none
Represents an empty string

Formal syntax

counter( <custom-ident>, [ <counter-style> | none ]? )

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

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

Examples

default value compared to 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) "]";
}

Result

decimal-leading-zero compared to 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) "]";
}

Result

Specifications

Specification Status Comment
CSS Lists Module Level 3
The definition of 'CSS Counters' in that specification.
Working Draft No change
CSS Level 2 (Revision 1)
The definition of 'CSS Counters' in that specification.
Recommendation Initial definition

Browser compatibility

No compatibility data found. Please contribute data for "css.types.counter" (depth: 1) to the MDN compatibility data repository.

See also

ドキュメントのタグと貢献者

このページの貢献者: estelle
最終更新者: estelle,