Difference between “.” and “#” selector in CSS

The dot(.) and hash(#) both of them are used as a CSS selector. Both selectors are used to select the content to set the style. CSS selectors select HTML elements according to its id, class, type, attribute, etc.

Id selector(“#”): The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element. It is written with the hash character (#), followed by the id of the element.

  • Syntax:
    #element_id_name{
      // CSS properties
    }
    
  • Example: In this code we will use only id selector to set style to the HTML elements.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
      
    <html>
      
    <head>
        <title>CSS Selector id(#)</title>
        <style>
            #container {
                width: 400px;
                height: 150px;
                border: 2px solid black;
                text-align: center;
            }
              
            #geeks {
                color: green;
            }
              
            #gfg {
                font-family: Courier New;
            }
        </style>
    </head>
      
    <body>
        <div id="container">
            <h1 id="geeks">GeeksforGeeks</h1>
            <h4 id="gfg">A Computer Science portal for Geeks</h4>
            <b class="selector">CSS Selector id(#)</b>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Class Selector(“.”): The class selector selects HTML elements with a specific class attribute. It is used with a period character “.” (full stop symbol) followed by the class name.



  • Syntax:
    .element_class_name{
      // CSS properties
    }
    
  • Example: In this code we will use only class selector to set style to the HTML elements.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
      
    <html>
      
    <head>
        <title>CSS class Selector</title>
        <style>
            .container {
                width: 400px;
                height: 150px;
                border: 2px solid black;
                text-align: center;
            }
              
            .geeks {
                color: green;
            }
              
            .selector {
                font-family: Courier New;
            }
        </style>
    </head>
      
    <body>
        <div class="container">
            <h1 class="geeks">GeeksforGeeks</h1>
            <h4 id="gfg">A Computer Science portal for Geeks</h4>
            <b class="selector">CSS Selector class(.)</b>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Difference between class (".") and id ("#") Selectors:

“.” “#”
The class selector “.” is used to represent class=”class_name” in HTML element. The id selector “#” is used to represent id=”id_name” in HTML element.
Each elements can contain more that one “.” selector means that elements is containing more than one class which is separated by space, the will be selected by multiple dots like .class1 .class2 …. and so on. Each element can contain only one “#” selector, not more than one unlike class selectors.
The “.” selectors are not unique, same selectors can applicable on multiple elements, if the HTML elements holds the same class property like a list of elements can contains the same class. The “#” are unique.

Example: The Combine selector example, in this example we will use both the selectors “.” and “#”.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <style
              
            /* #id selector */
            #geeks { 
                color:green; 
            
  
            /* .class selector */
            .gfg { 
                background-color: yellow; 
                font-style:italic; 
                color:green; 
            
  
            /* .class selector */
            .options {
                background-color: yellow;
                color:purple;
            }
        </style
    </head
      
    <body style = "text-align:center"
          
        <h1 id = "geeks"
            GeeksforGeeks 
        </h1
          
        <h4>#id And .class Selector</h4
        <div class = "gfg"
            <p>A computer science portal for Geeks</p
        </div
        <div class="select"
            <select name="slct" id="slct"
                <option>Computer Science Subjects</option
                <option class="options">Operating System</option
                <option class="options">Computer Networks</option
                <option class="options">Data Structure</option
                <option class="options">Algorithm</option
                <option class="options">C programming</option
                <option class="options">JAVA</option
            </select
        </div
    </body
</html>                     
       

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.