<custom-ident>
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.
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 (
A
toZ
, ora
toz
), - any decimal digit (
0
to9
), - 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 valuesnone
,inline
, andoutside
. Also, quite a few predefined values are implemented by the different browsers:disc
,circle
,square
,decimal
,cjk-decimal
,decimal-leading-zero
,lower-roman
,upper-roman
,lower-greek
,lower-alpha
,lower-latin
,upper-alpha
,upper-latin
,arabic-indic
,armenian
,bengali
,cambodian
,cjk-earthly-branch
,cjk-heavenly-stem
,cjk-ideographic
,devanagari
,ethiopic-numeric
,georgian
,gujarati
,gurmukhi
,hebrew
,hiragana
,hiragana-iroha
,japanese-formal
,japanese-informal
,kannada
,katakana
,katakana-iroha
,khmer
,korean-hangul-formal
,korean-hanja-formal
,korean-hanja-informal
,lao
,lower-armenian
,malayalam
,mongolian
,myanmar
,oriya
,persian
,simp-chinese-formal
,simp-chinese-informal
,tamil
,telugu
,thai
,tibetan
,trad-chinese-formal
,trad-chinese-informal
,upper-armenian
,disclosure-open
, anddisclosure-close
. -
grid-row-start
,grid-row-end
,grid-column-start
,grid-column-end
-
Forbids the
span
value. 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–2021 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