<custom-ident>

Summary

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.

Examples

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 */
   padding:0.5em;
}
h2 {
   counter-increment: subSectionCounter; /* note case must match exactly */
}
h2::before {
   content: counter(h1-counter)  "."  counter(subSectionCounter);
   padding:0.5em;
}
@keyframes colorChange {
   from {
     color:blue;
   }
   to {
     color:green;
   }
}

View live example

Related specifications

http://www.w3.org/TR/css3-values/#custom-idents

W3C Candidate Recommendation

CSS 2.1

W3C Recommendation