What characters are valid in CSS class names/selectors?
What characters are valid in CSS class names/selectors?
In CSS, class names or selectors are used to select specific HTML elements. There are several CSS rules that define class names or CSS selectors. In this tutorial, we will learn all the CSS rules and the valid characters for creating class names.
Following are the rules for creating CSS class names.
- Rule 1 – Class names or CSS selectors should contain only alphanumeric characters and some special characters such as hyphens (-) and underscores (_).
-
Rule 2 – Class names cannot begin with a number. For example, the class name “12sd” is invalid.
-
Rule 3 – Class names and CSS selectors can contain special characters such as ‘@’, ‘~’, ‘:’, etc., but they must be escaped when used in class names.
-
Rule 4 – Class names and CSS selectors are case-insensitive. Therefore, ‘.TEST’ and ‘.test’ are the same, but ‘.TEST’ will override the ‘.test’ class.
-
Rule 5 – Class names cannot contain spaces.
-
Rule 6 – Class names cannot contain only a hyphen (-). Additionally, a class name cannot begin with a hyphen followed by a number. For example, ‘-123’ does not work as a class name.
The above are the rules for defining class names in CSS. Now, let’s understand them through the following example.
Example 1
In the following example, we create class names for div elements using alphanumeric characters. All class names are valid, except for the ‘123test’ class name, which begins with a number, as the user can observe in the output.
In addition, all CSS for the ‘TEST’ class is overridden by the CSS for the ‘TEST’ class, meaning that if the class names are the same, the class name with the highest precedence in sort order will override all other classes. CSS
<html>
<head>
<style>
.test { color: red; font-size: 30px;}
.TEST { color: green; font-size: 30px;}
.test123 {color: blue; font-size: 30px;}
.123test { color: yellow; font-size: 30px;}
.Test456 { color: orange; font-size: 30px; } </style>
</head>
<body>
<h2>Use valid characters to create CSS class names. </h2>
<div class = "test"> The class name is test. </div>
<div class = "TEST"> The class name is TEST. </div>
<div class = "test123"> The class name is test123. </div>
<div class = "123test"> The class name is 123test. </div>
<div class = "Test456"> The class name is Test456. </div>
</body>
Example 2
In the following example, we use special characters such as underscores and hyphens in class names. In this example, all class names are valid except those that contain only one hyphen character, or those that begin with a hyphen and are followed by a number.
Class names that begin with a single underscore or multiple underscores are valid. Additionally, class names that begin with a hyphen and are followed by alphabetical characters are always valid.
<html>
<head>
<style>
._ { color: red; font-size: 25px;}
._- {color: blue;}
.ab-cd {color: green;}
.-efg {color: orange;}
.abc-_def {color: purple;}
</style>
</head>
<body>
<h2>Use special characters to create CSS class names. </h2>
<div class = "_"> The class name is _. </div>
<div class = "_-"> The class name is _-. </div>
<div class = "ab-cd"> The class name is ab-cd. </div>
<div class = "-efg"> The class name is -efg. </div>
<div class = "abc-_def"> The class name is abc-_def. </div>
</body>
</html>
<html>
<head>
<style>
/* Create CSS class name with valid characters */
.__ { color: green; font-size: 25px;}
.- { color: blue; font-size: 25px;}
.-- { color: yellow; font-size: 25px;}
.-123 { color: orange; font-size: 25px;}
.-abcd { color: purple; font-size: 25px;}
._123 { color: brown; font-size: 25px;}
._abcd { color: pink; font-size: 25px;}
.demo-class { color: aqua; font-size: 25px;}
.--demo {color: gray; font-size: 25px;}
</style>
</head>
<body>
<h2>Creating CSS class names with valid characters </i></h2>
<div class = "_"> The class name is '_' </div>
<div class = "__"> The class name is '__' </div>
<div class = "-"> The class name is '-' </div>
<div class = "--"> The class name is '--' </div>
<div class = "-123"> The class name is '-123' </div>
<div class = "-abcd"> The class name is '-abcd' </div>
<div class = "_123"> The class name is '_123' </div>
<div class = "_abcd"> The class name is '_abcd' </div>
<div class = "demo-class"> The class name is 'demo-class' </div>
<div class = "--demo"> The class name is '--demo' </div>
</body>
</html>
In the following example, we use special characters such as “@,” “#,” and “$” in the class name. We can add special characters to class names in HTML, but using class names with special characters in CSS will result in errors. Therefore, we need to escape special characters in CSS using backslashes.
Here, we use various characters in the class name and escape them with backslashes in CSS.
<html>
<head>
<style>
/* Escape special characters in class names */
.test@ { border: 2px solid green; margin: 5px; color: red;}
.test~ { border: 2px solid blue; margin: 5px; color: green; }
.test:123 { border: 2px solid red; margin: 5px; color: blue;}
.test[demo] { border: 2px solid yellow; margin: 5px; color: black;}
.test(90) { border: 2px solid orange; margin: 5px; color: purple;}
.test% { border: 2px solid pink; margin: 5px; color: brown;}
.test<span class="katex math inline">{ border: 2px solid black; margin: 5px; color: pink;}
.test# { border: 2px solid pink; margin: 5px; color: black;}
</style>
</head>
<body>
<h2>Create CSS class names with valid characters</h2>
<div class = "test@"> The class name is test@. </div>
<div class = "test~"> The class name is test~. </div>
<div class = "test:123"> The class name is test:123 </div>
<div class = "test[demo]"> The class name is test[demo]. </div>
<div class = "test(90)"> The class name is test(90) </div>
<div class = "test%"> The class name is test%. </div>
<div class = "test</span>"> The class name is test$. </div>
<div class = "test#"> The class name is test#. </div>
</body>
</html>
Users learned the rules for defining class names and CSS selectors. Additionally, we learned to use special characters when defining class names and to escape them with backslashes in CSS.