This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



The <custom-ident> CSS data type represents an identifier token created by the stylesheet author to reference content in a different part of the stylesheet. It is used for counters and for animation.

Identifiers are case-sensitive. Valid custom identifier values:

  • should usually contain letters, digits, non-ASCII characters, or the underscore (_) or hyphen (-) characters;
  • may contain other ASCII characters if escaped with backslash (\);
  • must not use a digit as the first character unless it is escaped;
  • must not match any keywords that are valid values for the property where it is used;
  • must not match the CSS-wide keywords “initial” or “inherit” or the reserved word "default", in any combination of upper or lowercase letters.

Identifiers are not quoted.


The example uses three custom identifiers: h1-counter, subSectionCounter, and colorChange.

h1 {
    counter-increment: h1-counter;
    counter-reset: subSectionCounter;
    animation: colorChange 3s infinite alternate;
h1::before {
    content: counter(h1-counter);
      /*counter tokens can contain digits and hyphens */
h2 {
   counter-increment: subSectionCounter; /* note case must match exactly */
h2::before {
   content: counter(h1-counter)  "."  counter(subSectionCounter);
@keyframes colorChange {
   from {
   to {

View live example

Related specifications
W3C Candidate Recommendation
CSS 2.1
W3C Recommendation