CSS <custom-ident> Data Type

In CSS, <custom-ident> is a generic data type that represents a custom identifier defined by the author of the style sheet.

Some CSS properties accept a <custom-ident> value so that you can create an arbitrary value that serves as an identifier. When you see <custom-ident> (including the < and >) anywhere in the CSS specifications, this refers to the fact that the value can be an arbitrary author-defined identifier.

For example, the counter-reset property accepts the following values.

So you could write something like this:

Here's a working example:

<style>
  h1 {
    counter-increment: h1-counter;
    counter-reset: h2-counter;
  }
  h1::before {
    content: counter(h1-counter); 
    padding-right: 0.5em;
  }
  h2 {
    counter-increment: h2-counter;
  }
  h2::before {
    content: counter(h1-counter)  "."  counter(h2-counter);
    padding-right: 0.5em;
  }
</style>

<h1>Heading</h1>
<h2>Heading</h2>
<h2>Heading</h2>
<h2>Heading</h2>
<h1>Heading</h1>
<h2>Heading</h2>

So in this example, I created two <custom-ident>s; one called h1-counter and another called h2-counter. And I used counter-increment and counter-reset to set/change the values of those identifiers as required.

Naming `<custom-ident>` Values

A <custom-ident> can be any valid CSS identifier that would not be misinterpreted as a pre-defined keyword in that property's value definition.

A <custom-ident> can include the following characters:

Any alphanumeric character (A to Z, or a to z).
Any decimal digit (0 to 9)
A hyphen (-).
An underscore (_).
May contain other ASCII characters if escaped with backslash (\).
A Unicode character (in the format of a backslash followed by one to six hexadecimal digits, which represents its Unicode code point).

A <custom-ident> must also adhere to the following rules:

Must not use a digit as the first character unless it is escaped.
Must not start with a hyphen followed by a decimal digit.
Must not start with two hyphens.
All <custom-ident>s are case sensitive. Therefore, myExample, myexample, MyExample, and MYEXAMPLE are four completely unrelated identifiers.
The CSS-wide keywords are not valid <custom-ident>s. Therefore, do not use inherit, initial, or unset as an identifier.
The default keyword is not a valid <custom-ident>.
Excluded keywords are excluded in all ASCII case permutations. So default, Default, and DEFAULT should not be used, for example.
Do not wrap your <custom-ident>s within quotes. If you do, they will be interpreted as strings instead of an identifier.

Here are some examples of valid <custom-ident> values:

CSS Specifications

The <custom-ident> data type is defined in CSS Values and Units Module Level 3 (W3C Candidate Recommendation, 29 September 2016)
CSS identifiers are also defined in Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (W3C Recommendation 07 June 2011)

CSS <custom-ident> Data Type

Naming <custom-ident> Values

CSS Specifications

Naming `<custom-ident>` Values