Difference Between " . " and " # " Selector in CSS

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

<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 ("#") 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 */ }`

Difference between :focus and :active selector

g_ragini

Improve

Article Tags :

Difference Between " . " and " # " Selector in CSS

Id selector("#")

Class Selector(".")

Difference between class (".") and id ("#") Selectors

Similar Reads

Thank You!

What kind of Experience do you want to share?