Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Which characters are valid in CSS class names/selectors?
In CSS, class names and selectors are used to target specific HTML elements for styling. Understanding the rules for valid CSS class names is essential for writing clean, maintainable stylesheets. This tutorial covers all the important rules and valid characters for creating CSS class names.
Rules for Valid CSS Class Names
Here are the essential rules for creating CSS class names
Rule 1 Class names should contain only alphanumeric characters (a-z, A-Z, 0-9), hyphens (-), and underscores (_).
Rule 2 Class names cannot start with digits. For example,
123testis invalid.Rule 3 Special characters like '@', '~', ':', etc. can be used but must be escaped with backslash (\) in CSS selectors.
Rule 4 Class names are case-sensitive in CSS.
.TESTand.testare different selectors.Rule 5 Class names cannot contain spaces.
Rule 6 Class names cannot be a single hyphen (-) or start with a hyphen followed by digits (e.g.,
-123).
Example 1: Alphanumeric Class Names
This example demonstrates valid and invalid alphanumeric class names. Notice how 123test (starting with digits) doesn't receive styling ?
<!DOCTYPE html>
<html>
<head>
<style>
.test { color: red; font-size: 20px; }
.TEST { color: green; font-size: 20px; }
.test123 { color: blue; font-size: 20px; }
.123test { color: yellow; font-size: 20px; }
.Test456 { color: orange; font-size: 20px; }
</style>
</head>
<body>
<h3>Valid and Invalid Class Names</h3>
<div class="test">Class: test (valid - red text)</div>
<div class="TEST">Class: TEST (valid - green text)</div>
<div class="test123">Class: test123 (valid - blue text)</div>
<div class="123test">Class: 123test (invalid - no styling)</div>
<div class="Test456">Class: Test456 (valid - orange text)</div>
</body>
</html>
The first three divs display with colored text (red, green, blue, orange), while "123test" appears unstyled because class names cannot start with digits. Each valid class name renders with its specified color.
Example 2: Hyphens and Underscores
This example shows how hyphens and underscores work in class names ?
<!DOCTYPE html>
<html>
<head>
<style>
._ { color: red; font-size: 18px; }
.__ { color: green; font-size: 18px; }
.-- { color: blue; font-size: 18px; }
.-abcd { color: purple; font-size: 18px; }
._123 { color: brown; font-size: 18px; }
.demo-class { color: navy; font-size: 18px; }
.--demo { color: darkred; font-size: 18px; }
</style>
</head>
<body>
<h3>Hyphens and Underscores in Class Names</h3>
<div class="_">Single underscore (valid)</div>
<div class="__">Double underscore (valid)</div>
<div class="--">Double hyphen (valid)</div>
<div class="-abcd">Hyphen + letters (valid)</div>
<div class="_123">Underscore + numbers (valid)</div>
<div class="demo-class">Standard hyphenated (valid)</div>
<div class="--demo">Double hyphen prefix (valid)</div>
</body>
</html>
All div elements display with their respective colors, demonstrating that underscores and hyphens are valid in class names. Single hyphens alone and hyphens followed by letters are both valid patterns.
Example 3: Special Characters with Escaping
Special characters in class names must be escaped with backslashes in CSS selectors ?
<!DOCTYPE html>
<html>
<head>
<style>
.test\@ { border: 2px solid green; padding: 10px; margin: 5px; }
.test\~ { border: 2px solid blue; padding: 10px; margin: 5px; }
.test\:123 { border: 2px solid red; padding: 10px; margin: 5px; }
.test\[demo\] { border: 2px solid orange; padding: 10px; margin: 5px; }
.test\% { border: 2px solid purple; padding: 10px; margin: 5px; }
</style>
</head>
<body>
<h3>Special Characters in Class Names</h3>
<div class="test@">Class: test@ (escaped as \@)</div>
<div class="test~">Class: test~ (escaped as \~)</div>
<div class="test:123">Class: test:123 (escaped as \:)</div>
<div class="test[demo]">Class: test[demo] (escaped as \[\])</div>
<div class="test%">Class: test% (escaped as \%)</div>
</body>
</html>
Each div displays with a colored border and padding, demonstrating that special characters can be used in class names when properly escaped in CSS with backslashes.
Conclusion
CSS class names must follow specific naming rules to be valid. Use alphanumeric characters, hyphens, and underscores freely, but avoid starting with digits and remember to escape special characters with backslashes when used in CSS selectors.
3K+ Views
