CSS Reference Data Type

<user-ident>

The <user-ident> data type is used to represent a custom identifier defined by the CSS author.

Some properties in CSS accept arbitrary identifiers defined by the author.
User-identified values are similar to CSS identifiers. CSS identifiers are the labels used in property names, keyword values, and at-rule names, as well as in element type names, classes, and IDs within selectors. In the following example, fieldset, border, and none are all CSS identifiers:

fieldset {
  border: none;
}

Just like CSS identifiers, custom identifiers have grammar and syntax rules that specify how an identifier can be defined. Custom identifiers are similar to CSS identifiers in their syntax: they are a sequence of characters that, according to the specification, can contain any alphanumeric character (A to Z, or a to z), any digit from 0 to 9, and ISO 10646 characters U+00A0 (inverted exclamation mark) and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters (with a backslash ‘\’).

Unlike CSS identifiers which are case-insensitive, custom identifiers are case-sensitive, which means that some-name is different from Some-Name and SOME-Name; they are all different, unrelated user-defined identifiers.

A valid custom identifier is one that does not otherwise appear as a pre-defined CSS keyword in a property’s value definition. An identifier should also not be placed inside quotes, otherwise it will be treated as a <string> data type, not a <user-ident> type.

CSS properties that use a custom identifier are mostly those related to CSS counters.

Trivia & Notes

You can read a lot more about escaping characters in CSS in CSS character escape sequences by Mathias Bynens.

You can also find a full list of Unicode characters starting from U+00A0 and more in this Unicode character table.

Examples

The following are all valid custom identifiers:

blah33

 _something

-my-identifier

some-name

\5 five

cute\.kitty
                

The following are all invalid custom identifiers:

cute.kitty      /* the period needs to be escaped, only _ and - don't need to be escaped */

"my-identifier" /* cannot be quoted, otherwise it's a <string> not a <user-ident> type */

--pocket        /* cannot start with two hyphens */

-87barbera      /* cannot start with a hyphen followed by a digit */  
                

Browser Support

Custom user-defined identifiers are supported in Chrome, Firefox, IE 8+, Opera 9.2+, Safari 3.1+, and on Android and iOS.

Notes

Not all devices have equal support for all Unicode characters. You can check support for different characters with this tool by John Holt Ripley.

Written by

Last updated February 4, 2015 at 5:00 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.