identifiers in CSS
The secret power of CSS identifiers, the tiny names that give you full control over your styles!
nanadwumor
-
Identifiers are custom CSS names you create.
-
CSS treats similar names with different cases as unique.
-
Used in list counters like sectionCounter.
-
Avoid using CSS keywords as identifiers.
RECOMMENDED ARTICLES
Images in CSS
Did you know CSS can create images without using a single file? CSS uses URLs to display images. [crayon-68e192ba10ff7164539373-i/] serves images by device quality. Gradients generate images with colors only. Useful for backgrounds, designs, and...
inherit, initial, unset in CSS
Tiny CSS keywords can reset, copy, or undo styles with just one word. Keywords control styles without numbers inherit copies, initial resets, unset smart reset all applies to most properties, safer to limit revert returns to browser/user defaults...
Some CSS properties don’t just take numbers, colors, or URLs — they accept something called an identifier.
An identifier is basically a name you make up yourself, like putting a label on a folder so you can refer back to it later. In CSS, identifiers are written as <identifier> in the specification.
Case-Sensitivity Matters
CSS treats:
myID
MyID
MYID
as three completely different names, even though they look similar to us.
Think of it like usernames on a system: Alex and alex might belong to two different people.
Where Identifiers Are Used
One common place you’ll see identifiers is in list counters (for custom numbering styles).
For example:
|
1 2 3 4 5 6 7 8 9 |
ol { list-style-type: upper-roman; counter-reset: sectionCounter; } li::before { counter-increment: sectionCounter; content: "Section " counter(sectionCounter) ": "; } |
Here, sectionCounter is an identifier. You chose that name, and CSS uses it to keep track of numbering. You could have called it bananaCounter and it would still work — as long as you’re consistent.
Avoid Keyword Conflicts
Some CSS properties accept both identifiers and keywords.
Keywords are reserved words that CSS already understands, like none, inherit, or auto.
Identifiers are custom names you invent.
If you name your identifier the same as a keyword, you’re asking for trouble. For example, calling your counter none could confuse the browser, since none already has a special meaning.
Recent Comments