Skip to content
Related Articles

Related Articles

Improve Article

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

  • Difficulty Level : Easy
  • Last Updated : 30 Jun, 2021

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. 

html




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

html




<!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>
  • 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 “#”.  

html




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

Output:  

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :