- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS Data Type - <custom-ident>
CSS data type <custom-ident> represents a custom identifier. It is used to denote custom names or identifiers that developers define for certain CSS properties or values. This data type allows for a broader range of possibilities by enabling the use of custom names beyond the predefined keywords and standard identifiers.
Custom identifiers are typically used in situations where developers want to create and use their own naming conventions for certain aspects of styling or theming.
For example, in the context of CSS variables (custom properties), you might use <custom-ident> to represent a custom identifier for a variable name:
:root { --main-color: red; } .element { color: var(--main-color); }
In this example, --main-color is a custom identifier, and the var() function is used to reference the value stored in the custom property.
Forbidden Values
To prevent uncertainity, each property that uses <custom-ident> forbids the use of specific values as listed below:
animation-name − Global CSS values (unset, initial, inherit and none) are forbidden.
counter-reset, counter-increment − Global CSS values (unset, initial, inherit and none) are forbidden.
@counter-style, list-style-type − Global CSS values (unset, initial, inherit) are forbidden alongwith (none, inline, outside), as well as the values: 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, disclosure-close.
grid-row-start, grid-row-end, grid-column-start, grid-column-end − The span value is forbidden.
view-transition-name − Global CSS values (unset, initial, inherit) are forbidden, as well as none.
will-change − Global CSS values (unset, initial, inherit), as well as the values (will-change, auto, scroll-position, and contents) are forbidden.
Syntax
The syntax for CSS <custom-ident> follows the same rules as CSS property names, except that it is case-sensitive. This element includes one or more characters, defined as any of the following:
Any alphabetical letter from A to Z or a to z.
Any decimal digit from 0 to 9.
The hyphen (-) character.
The underscore (_) character.
An escaped character is defined as a character that comes after a backslash (/).
A Unicode character represented by a backslash (/) followed by one to six hexadecimal digits.
Escaping characters
Unicode code points can be included in a <custom-ident> or quoted <string> by escaping them.
CSS provides various ways of escaping a character. Escape sequences begin with a backslash (\) and follow with:
Hexadecimal sequences of one to six digits (ABCDEF0123456789) can be optionally followed by white space. These sequences are replaced by the Unicode code point corresponding to the specified hex digits, with the whitespace allowing subsequent actual hex digits.
Any Unicode code point that is neither a hex number nor a newline character.
Examples:
"&B" can be represented as \26 B or \000026B.
"hi.there" can be represented as hi\.there or hi\002Ethere.
"toto?" can be written as toto\?, toto\3F, or toto\00003F.
Valid Identifier
The following syntax represents a combination of alphanumeric characters and digits −
tata59 A combination of alphanumeric characters and numbers. high-level A combination of alphanumeric characters and a dash -nest Alphanumeric characters are placed after a dash. _external Alphanumeric characters are placed after a underscore. \11 nono A group of alphanumeric characters that follows a Unicode character. tili\.wow A correctly escaped period.
Invalid Identifier
The following syntax represents specific rules for representing values −
24rem It must not begin with a decimal digit. -16rad It cannot begin with a dash followed by a decimal digit. tili.wow The only characters that don't require escape are alphanumeric characters, _, and -. 'tiliwow' This would be a <string>. "tiliwow" This would be a <string>.
CSS <custom-ident> - animation-name
The following example demonstrates the use of animation-name property by defining @Keyframes -demoanimation. The hyphen(-) naming convention is attached to CSS syntax as custom identifier −
<html> <head> <style> @keyframes -demoanimation { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } } .box { width: 100px; height: 100px; background-color: pink; animation-name: -demoanimation; animation-duration: 3s; animation-iteration-count: infinite; } </style> </head> <body> <div class="box"></div> </body> </html>
CSS <custom-ident> - counter-reset, counter-increment
The following example demonstrates the use of counter-reset property with the custom-identifier demo-counter and sets its initial value to 0. The counter-increment property increments the value of the counter each time −
<html> <head> <style> body { counter-reset: demo-counter; } p::before { content: counter(demo-counter); counter-increment: demo-counter; margin: 5px; } </style> </head> <body> <div> <p>First Paragraph</p> <p>Second Paragraph</p> <p>Third Paragraph.</p> </div> </body> </html>
To Continue Learning Please Login
Login with Google