Difference Between " . " and " # " Selector in CSS (original) (raw)

Last Updated : 16 Jan, 2025

**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 `

CSS Selector id(#)

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 `

CSS Selector class(.)

**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 */ }