CSS <custom-ident> Data Type

The CSS <custom-ident> data type represents an author-defined identifier. It is used by CSS features that allow developers to create custom names for items such as animations, grid lines, counters, and other named values.

Syntax

A <custom-ident> uses CSS identifier syntax. It is written without quotation marks and must not use keywords that are excluded by the CSS feature in which the identifier appears.

my-animation
sidebar
main-content
column-start
example123

Valid Identifiers

A custom identifier can contain letters, digits, hyphens, underscores, escaped characters, and non-ASCII characters according to CSS identifier syntax. An identifier cannot begin with an unescaped digit, and some character sequences must be escaped to form a valid identifier.

The following are examples of custom identifiers:

fade-in
main_area
section2
--example
my\ identifier

The exact set of allowed values can be further restricted by the property or CSS feature that uses <custom-ident>.

Reserved Keywords

The CSS-wide keywords cannot be used as <custom-ident> values. These reserved keywords are:

initial
inherit
unset
revert
revert-layer
default

Other keywords may also be excluded depending on the property or feature. For example, a property can reserve its own keywords so they cannot be interpreted as custom names.

Case Sensitivity

Custom identifiers are generally compared using CSS's identifier matching rules. Whether case differences are significant can depend on the CSS feature using the identifier, so names should be written consistently wherever they are referenced.

<custom-ident> Example

In the following example, fade-in is a custom identifier used to name a CSS animation:

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.example {
  animation-name: fade-in;
  animation-duration: 2s;
}

The same identifier connects the @keyframes rule with the animation-name property.

Custom identifiers are also commonly used to name grid lines:

.grid {
  grid-template-columns: [content-start] 1fr [content-end];
}
.item {
  grid-column: content-start / content-end;
}

Specifications

The <custom-ident> data type is defined in the CSS Values and Units Module Level 4 .