The <custom-ident> CSS data type denotes an arbitrary user-defined string used as an identifier. It is case-sensitive, and certain values are forbidden in various contexts to prevent ambiguity.
On this page
<custom-ident>
Syntax
The syntax of <custom-ident> is similar to CSS identifiers (such as property names), except that it is case-sensitive. It consists of one or more characters, where characters can be any of the following:
- any alphabetical character (
AtoZ, oratoz), - any decimal digit (
0to9), - a hyphen (
-), - an underscore (
_), - an escaped character (preceded by a backslash,
\), - a Unicode character (in the format of a backslash,
\, followed by one to six hexadecimal digits, representing its Unicode code point)
Note that id1, Id1, iD1 and ID1 are all different identifiers as they are case-sensitive. On the other hand, as there are several ways to escape a character, toto\? and toto\3F are the same identifiers.
Forbidden values
A <custom-ident> must not be placed between single or double quotes as this would be identical to a <string>. Moreover, the first character must not be a decimal digit, nor a hyphen (-) followed by a decimal digit or another hyphen.
To prevent ambiguity, each property that uses <custom-ident> forbids the use of specific values:
-
animation-name -
Forbids the global CSS values (
unset,initial, andinherit), as well asnone. counter-reset,counter-increment-
Forbids the global CSS values (
unset,initial, andinherit), as well asnone. @counter-style,list-style-type-
Forbids the global CSS values (
unset,initial, andinherit), as well as the values:noneinlineoutside
Also, quite a few predefined values are implemented by the different browsers:
disccirclesquaredecimalcjk-decimaldecimal-leading-zerolower-romanupper-romanlower-greeklower-alphalower-latinupper-alphaupper-latinarabic-indicarmenianbengalicambodiancjk-earthly-branchcjk-heavenly-stemcjk-ideographicdevanagariethiopic-numericgeorgiangujaratigurmukhihebrewhiraganahiragana-irohajapanese-formaljapanese-informalkannadakatakanakatakana-irohakhmerkorean-hangul-formalkorean-hanja-formalkorean-hanja-informallaolower-armenianmalayalammongolianmyanmaroriyapersiansimp-chinese-formalsimp-chinese-informaltamilteluguthaitibetantrad-chinese-formaltrad-chinese-informalupper-armeniandisclosure-opendisclosure-close
grid-row-start,grid-row-end,grid-column-start,grid-column-end-
Forbids the
spanvalue. -
view-transition-name -
Forbids the global CSS values (
unset,initial, andinherit), as well asnone. -
will-change -
Forbids the global CSS values (
unset,initial, andinherit), as well as the valueswill-change,auto,scroll-position, andcontents.
Examples
Valid identifiers
nono79 A mix of alphanumeric characters and numbers
ground-level A mix of alphanumeric characters and a dash
-test A dash followed by alphanumeric characters
_internal An underscore followed by alphanumeric characters
\22 toto A Unicode character followed by a sequence of alphanumeric characters
bili\.bob A correctly escaped period
Invalid identifiers
34rem It must not start with a decimal digit.
-12rad It must not start with a dash followed by a decimal digit.
bili.bob Only alphanumeric characters, _, and - needn't be escaped.
--toto It must not start with two dashes. This would be a custom property.
'bilibob' This would be a <string>.
"bilibob" This would be a <string>.
Specifications
Browser compatibility
See also
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident