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: