CSS Class Name With Forward Slash or UniCode Character
Learn how to use a forward slash or UniCode Character in a CSS class name
Published
- CSS Class Name With Forward Slash
- Example Adding Forwad Slash in CSS Class
- Example Adding UniCode Characters in CSS Class
CSS Class Name With Forward Slash
Using a forward slash in class name is perfectly valid in CSS. You can use most of unicode characters in both the class name and id attributes in HTML. However, some characters like forward slash needs to escape to make it work.
Syntax
.\/banner {
color: #ccc;
}
Example Adding Forwad Slash in CSS Class
<!DOCTYPE html>
<html>
<head>
<style>
.\/banner {
color: #ccc;
}
</style>
</head>
<body>
<div class="/banner">
Here is Banner Text
</div>
</body>
</html>
Example Adding UniCode Characters in CSS Class
<!DOCTYPE html>
<html>
<head>
<style>
.□ { color: red; }
.┌ { color: blue; }
.┐ { color: green; }
.└ { color: orange; }
.┘ { color: skyblue; }
</style>
</head>
<body>
<div class="□"> Main Container
<div class="┌"> Container 1
<div class="┐"> Container 2
<div class="└"> Container 3
<div class="┘"> Container 4
content
</div>
</div>
</div>
</div>
</body>
</html>