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.
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.
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:
A to Z, or a to z),0 to 9),-),_),\),\, 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.
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-nameForbids the global CSS values (unset, initial, and inherit), as well as none.
counter-reset, counter-increment
Forbids the global CSS values (unset, initial, and inherit), as well as none.
@counter-style, list-style-type
Forbids the global CSS values (unset, initial, and inherit), as well as the values:
noneinlineoutsideAlso, 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-closegrid-row-start, grid-row-end, grid-column-start, grid-column-end
Forbids the span value.
view-transition-nameForbids the global CSS values (unset, initial, and inherit), as well as none.
will-changeForbids the global CSS values (unset, initial, and inherit), as well as the values will-change, auto, scroll-position, and contents.
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
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>.
© 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