Open In App

Which characters are valid in CSS class names/selectors?

Improve
Improve
Like Article
Like
Save
Share
Report

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: 



Last Updated : 03 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads