Skip to content
Related Articles

Related Articles

Which characters are valid in CSS class names/selectors?
  • Last Updated : 20 May, 2019

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.




<!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 uper 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.




<!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 uper 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:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :