Which characters are valid in CSS class names/selectors?
Last Updated :
03 Aug, 2023
It is very easy to choose a valid class name or selectors in CSS just follow the rule.
- A valid name should start with an underscore (_), a hyphen (-) or a letter (a-z)/(A-Z) which is followed by any numbers, hyphens, underscores, letters.
- It cannot start with a digit, starting with the digit is acceptable by HTML5 but not acceptable by CSS.
- Two hyphens followed by a number is valid.
Example 1: This example describes the list of valid id selectors using CSS.
html
<!DOCTYPE html>
<html>
<head>
<title>
Valid id Selectors
</title>
<style>
#main {
border:2px solid green;
text-align:center;
}
#1st {
color:green;
font-size:30px;
}
#_st {
color:green;
font-size:30px;
}
#-st {
color:green;
font-size:30px;
}
#st {
color:green;
font-size:30px;
}
#St {
color:green;
font-size:30px;
}
#--1 {
color:green;
font-size:30px;
}
#s {
color:green;
font-size:30px;
}
#_1 {
color:green;
font-size:30px;
}
#- {
color:green;
font-size:30px;
}
#-- {
color:green;
font-size:30px;
}
#_ {
color:green;
font-size:30px;
}
#__ {
color:green;
font-size:30px;
}
</style>
</head>
<body>
<div id="main">
<div id="1st">Starting with digit GeeksforGeeks</div>
<div id="_st">Starting with underscore</div>
<div id="-st">Starting with hyphen</div>
<div id="st">Starting with lower case alphabet</div>
<div id="St">Starting with upper case alphabet</div>
<div id="--1">Starting with double hyphen</div>
<div id="s">only one alphabet</div>
<div id="_1">underscore before digit</div>
<div id="-">only hyphen</div>
<div id="--">double hyphen</div>
<div id="_">only underscore</div>
<div id="__">double underscore</div>
</div>
</body>
</html>
Output:
Example 2: This example describes the list of valid class selectors using CSS.
html
<!DOCTYPE html>
<html>
<head>
<style>
.main {
border:2px solid green;
}
.1st {
color:green;
font-size:30px;
background-color:#9400D3;
}
._st {
color:green;
font-size:30px;
background-color:#4B0082;
}
.-st {
color:green;
font-size:30px;
background-color:#0000FF;
}
.st {
color:green;
font-size:30px;
background-color:##00FF00;
}
.St {
color:green;
font-size:30px;
background-color:#FFFF00;
}
.--1st {
color:green;
font-size:30px;
background-color:#FF7F00;
}
.s {
color:green;
font-size:30px;
background-color:#FF0000;
}
._1 {
color:green;
font-size:30px;
background-color:#9400D3;
}
.- {
color:green;
font-size:30px;
background-color:#4B0082;
}
.-- {
color:green;
font-size:30px;
background-color:#0000FF;
}
._ {
color:green;
font-size:30px;
background-color:##00FF00;
}
.__{
color:green;
font-size:30px;
background-color:#FFFF00;
}
</style>
</head>
<body>
<div class="main">
<h1 style="color:green; text-align:center;">
GeeksforGeeks
</h1>
<hr>
<div class="1st">Starting with digit </div>
<div class="_st">Starting with underscore</div>
<div class="-st">Starting with hyphen</div>
<div class="st">Starting with lower case alphabet</div>
<div class="St">Starting with upper case alphabet</div>
<div class="--1st">Starting with double hyphen</div>
<div class="s">only one alphabet</div>
<div class="_1">underscore before digit</div>
<div class="-">only hyphen</div>
<div class="--">double hyphen</div>
<div class="_">only underscore</div>
<div class="__">double underscore</div>
</div>
</body>
</html>
Output:
