Difference Between " . " and " # " Selector in CSS
Last Updated :
12 Jul, 2025
Improve
In CSS, selectors define which HTML elements receive specific styles.
- Class Selector (.): Targets elements with a specified class attribute, allowing multiple elements to share the same styling.
- ID Selector (#): Targets a single element with a unique ID attribute, ensuring that styles are applied to one specific element on the page.
Id selector("#")
In CSS, the ID selector (#) targets a single, unique element based on its id attribute. Since IDs should be unique within an HTML document, this selector styles a specific element.
<html>
<head>
<style>
#container {
width: 400px;
height: 150px;
border: 2px solid black;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<b class="selector">
CSS Selector id(#)
</b>
</div>
</body>
</html>
<html><head> <style> #container { width: 400px; height: 150px; border: 2px solid black; text-align: center; } </style></head><body> <div id="container"> <b class="selector"> CSS Selector id(#) </b> </div></body></html>- The #container selector applies styles to the HTML element with id="container".
- The width, height, border, and text-align properties define the appearance of this specific element.
Class Selector(".")
In CSS, the class selector (.) targets HTML elements based on their class attribute, allowing multiple elements to share the same styling.
<html>
<head>
<style>
.container {
width: 400px;
height: 150px;
border: 2px solid black;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<b class="selector">CSS Selector class(.)</b>
</div>
</body>
</html>
<html><head> <style> .container { width: 400px; height: 150px; border: 2px solid black; text-align: center; } </style></head><body> <div class="container"> <b class="selector">CSS Selector class(.)</b> </div></body></html>- The .container selector applies styles to all HTML elements with the class="container" attribute.
- The specified width, height, border, and text-align properties define the appearance of these elements.
Difference between class (".") and id ("#") Selectors
| Aspect | Class Selector (".") | Id Selector ("#") |
|---|---|---|
| Usage | Targets elements with a specific class attribute | Targets an element with a unique id attribute |
| Uniqueness | Can be applied to multiple elements | Must be unique within a page, used for one element |
| Multiplicity | An element can have multiple classes | An element can have only one id |
| Application | Used for general styling across multiple elements | Used for specific, single-element styling |
| Syntax | .class_name { /* properties */ } | #id_name { /* properties */ } |
