Difference Between " . " and " # " Selector in CSS Last Updated : 12 Jul, 2025 Comments Improve Suggest changes Like Article Like Report 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 <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 <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 ("#") SelectorsAspectClass Selector (".")Id Selector ("#")UsageTargets elements with a specific class attributeTargets an element with a unique id attributeUniquenessCan be applied to multiple elementsMust be unique within a page, used for one elementMultiplicityAn element can have multiple classesAn element can have only one idApplicationUsed for general styling across multiple elementsUsed for specific, single-element stylingSyntax.class_name { /* properties */ }#id_name { /* properties */ } Comment More infoAdvertise with us Next Article Difference between CSS and CSS3 G g_ragini Follow Improve Article Tags : Technical Scripter Web Technologies CSS Technical Scripter 2019 CSS-Misc +1 More Similar Reads Difference between ID and Class Selector in jQuery jQuery ID Selector: The #id selector specifies the id for an HTML element to be selected. It should not begin with a number and the id attribute must be unique within a document which means it can be used only one at a time. Syntax: $("#id")id is the element's specific id. Example: The following cod 2 min read Difference Between CSS and SCSS CSS is a stylesheet language whereas SCSS is a preprocessor scripting language that is a superset of CSS. This article will cover the detailed differences between CSS and SCSS.CSSCSS (Cascading Style Sheets) is a stylesheet language for designing the layout of web pages.It is simple to use and follo 3 min read Difference between HTML and CSS HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the foundational technologies for creating web pages. HTML provides the structure, while CSS defines the style and layout. HTML is used along with CSS and Javascript to design web pages. HTML (HyperText Markup Language)HTML is the 4 min read Difference between :focus and :active selector :focus Selector: It generally applies on form elements or elements that can be focused using keyboard or mouse like input box, textarea. An element is in focus state while we use "tab" key of keyboard for that particular element. The state of focus will be same until user switch tab to another eleme 2 min read Difference between CSS and CSS3 CSS (Cascading Style Sheets) is a stylesheet language used to style web pages, while CSS3 is its advanced version with new features and modules. CSS3 introduces enhanced styling capabilities like animations, transitions, media queries, and rounded corners, providing more flexibility and functionalit 4 min read Difference between :first-child and :first-of-type selector in CSS The :first-child and :first-of-type selectors in CSS are used to target specific child elements within a parent. The :first-child selector targets an element if it is the first child of its parent, regardless of type. On the other hand, the :first-of-type selector targets the first occurrence of a s 2 min read Like