Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Which characters are valid in CSS class names/selectors?
In CSS, class names or selectors are used to select a particular HTML element. There are some CSS rules to define the class names or CSS selectors. In this tutorial, we will learn all CSS rules and about valid characters to create class names.
Here are the rules for creating CSS class names.
Rule 1 − Class name or CSS selectors should only contain alphanumeric characters and some special characters such as hyphens (-) and underscores (_).
Rule 2 − Class names can’t start with the digits. For example, the “12sd” class name is invalid.
Rule 3 − Class names and CSS selectors can contain special characters such as ‘@’, ‘~’,’:’, etc., but they need to be escaped while using the class names in CSS.
Rule 4 − Class names and CSS selectors are case-insensitive. So, ‘.TEST’ and ‘.test’ are the same but ‘.TEST’ overrides the ‘.test’ class.
Rule 5 − The class name doesn’t contain space.
Rule 6 − The class name should not contain only a single hyphen (-). Also, the Class name can’t start with a hyphen followed by digits. For example, ‘-123’ as a class name will not work.
Above, we have seen the rules to define class names in CSS. Now, let’s try to understand it via the examples below.
Example 1
In the example below, we created the div elements' class names using alphanumeric characters. All class names are valid except the ‘123test’ class name, as it starts with the digits, which users can observe in the output.
Also, all CSS of the ‘test’ class is overridden by the CSS of the ‘TEST” class, which means if class names are the same, a class name with the highest priority in sorted order overrides the CSS of all other classes.
<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>Creating the <i> CSS class names with valid characters. </i></h2>
<div class = "test"> Class name is test. </div>
<div class = "TEST"> Class name is TEST. </div>
<div class = "test123"> Class name is test123. </div>
<div class = "123test"> Class name is 123test. </div>
<div class = "Test456"> Class name is Test456. </div>
</body>
</html>
Example 2
In the example below, we have used special characters like underscore and hyphens in the class names. In this example, all class names are valid except class names containing a single hyphen character, starting with a hyphen and followed by digits.
Class names starting with a single underscore or multiple underscores are valid. Also, class names starting with a hyphen and followed by alphabetical characters are always valid.
<html>
<head>
<style>
._ { color: red; font-size: 25px;}
.__ { 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 the <i> CSS class names with valid characters. </i></h2>
<div class = "_"> Class name is '_' </div>
<div class = "__"> Class name is '__' </div>
<div class = "-"> Class name is '-' </div>
<div class = "--"> Class name is '--' </div>
<div class = "-123"> Class name is '-123' </div>
<div class = "-abcd"> Class name is '-abcd' </div>
<div class = "_123"> Class name is '_123' </div>
<div class = "_abcd"> Class name is '_abcd' </div>
<div class = "demo-class"> Class name is 'demo-class' </div>
<div class = "--demo"> Class name is '--demo' </div>
</body>
</html>
Example 3
In the example below, we have used special characters such as ‘@’, ‘#’, ‘$’, etc., in the class names. We can add a special character in the class name in HTML, but using a class name with special characters in CSS gives an error. So, we need to escape special characters in CSS using the ‘\’ characters.
Here, we have used various characters in class names and escaped using a backslash in CSS.
<html>
<head>
<style>
/* escaping special characters in the class name */
.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\$ { border: 2px solid black; margin: 5px; color: pink;}
.test\# { border: 2px solid pink; margin: 5px; color: black;}
</style>
</head>
<body>
<h2>Creating the <i> CSS class names with valid characters. </i></h2>
<div class = "test@"> Class name is test@. </div>
<div class = "test~"> Class name is test~. </div>
<div class = "test:123"> Class name is test:123 </div>
<div class = "test[demo]"> Class name is test[demo]. </div>
<div class = "test(90)"> Class name is test(90) </div>
<div class = "test%"> Class name is test%. </div>
<div class = "test$"> Class name is test$. </div>
<div class = "test#"> Class name is test#. </div>
</body>
</html>
Users learned the rules to define the class names and CSS selectors. Also, we learned to use the special characters while defining the class names and escape them using the backslash character in CSS.
1K+ Views
To Continue Learning Please Login