CSS Data Type - <ident>

The CSS data type <ident> signifies an arbitrary string that is used as an identifier.

Syntax

The data type <custom-ident> has the syntax that is similar to CSS identifiers, such as property names. The only difference is that it is case-sensitive. It can contain one or more characters, where characters can be one of the following:

  • Any alphabetical character (A to Z, or a to z),

  • Any decimal digit (0 to 9),

  • 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. It represents the Unicode code point.

Note: Since the syntax of <custom-ident> is case-sensitive, the identifiers such as, ID1, id1, Id1 and iD1 are all different identifiers.

/* Valid identifiers */
test1           /* A mix of alphanumeric characters and numbers */
test-sample     /* A mix of alphanumeric characters and numbers with a hyphen (-) */
-test1          /* A dash/hyphen followed by alphanumeric characters */
--test1         /* A custom-property like identifier */
_test1          /* An underscore followed by alphanumeric characters */
\11 test        /* A Unicode character followed by a sequence of alphanumeric characters */
test\.sample    /* A correctly escaped period */

/* Invalid identifiers */
25rem           /* Must not start with a decimal digit */
-25rem          /* Must not start with a dash/hyphen followed by a decimal digit */
test.sample     /* Only alphanumeric characters, _, and - needn't be escaped */
'test1'         /* No string allowed */
"test1"         /* No string allowed */

CSS <ident> - Custom identifier used as a variable

The following example demonstrates the use of <ident> data type to declare a variable and use it in the css styling:

<html>
<head>
<style>
   :root {
      --body-background-color: peachpuff;
   }

   div {
      background-color: var(--body-background-color);
      width: 300px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
   <h1>custom-ident - example</h1>
   <div></div>
</body>
</html>

In the example above, a custom property is declared using the data type <custom-ident>, named --body-background-color to set the color for the div element. Here the syntax uses two dashes to start the name followed by alphabetical characters and hyphens.

Advertisements