Difference between "." and "#" selector in CSS - GeeksforGeeks

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:  
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
ysachin2314
CSS-Misc
HTML-Misc
Picked
CSS
Technical Scripter
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript