Which characters are valid in CSS class names/selectors?

26 Sep, 2021
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:  
 
ManasChhabra2
anikaseth98
CSS-Misc
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS