Skip to content
Related Articles
Open in App
Not now

Related Articles

Which characters are valid in CSS class names/selectors?

Improve Article
Save Article
  • Last Updated : 26 Sep, 2021
Improve Article
Save Article

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: 
 
 

My Personal Notes
arrow_drop_up
Related Articles
1.
CSS | : valid Selector
2.
Is background-color:none valid CSS ?
3.
How to override the CSS properties of a class using another CSS class ?
4.
Which CSS framework is better Tailwind CSS or Bootstrap ?
5.
What are valid values for the id attribute in HTML?
6.
Which Characters Should Be Escaped Inside A "pre" tag?
7.
Which table property specifies the width that should appear between table cells in CSS ?
8.
Which property is used as shorthand to specify a number of other font properties in CSS ?
9.
Which property is used to underline, overline, and strikethrough text using CSS ?
10.
Which property specifies the width of a border in CSS ?
Previous
HTML | DOM Datalist options Collection
Next

Implementation of Array class in JavaScript
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
Sabya_Samadder
@Sabya_Samadder
Vote for difficulty





Improved By :
Article Tags :
Practice Tags :
Report Issue
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!