Difference between '.' and '#' selector in CSS

In this tutorial, we will learn about the CSS '.' and '#' selectors and the differences between '.' and '#' selectors in CSS. By Apurva Mathur Last updated : July 26, 2023

Introduction

As the name suggests, selectors select the particular element you want to style. Selectors are some pre-defined methods that are used when you want to style different elements. There are 5 types of selectors in CSS.

Element selector
Class selector
ID selector
Group Selector
Universal selector

CSS Dot (".") Selector

The class selector is also known as the . selector as classes are denoted as . (dot) in CSS. Class attribute becomes important when you want to add some javascript to your webpage. When you want to style a group of different HTML tags, then despite writing different tags we can just assign them a class and can style them all together.

In HTML, it is really simple to define a class. You just have to mention the class="class_name" under the tag.

HTML Syntax

Syntax while writing an HTML code

<tag class="class_name"></tag>

The class name can be anything.

CSS Syntax

In CSS, you have to use the following syntax:

.classname{
    CSS properties
}

CSS Dot (".") Selector Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <style>
    .div1{
    background-color: lightseagreen;
    color: white;
    font-size: 30px;
    font-family: "Lucida Calligraphy";
    width: 60%;
    height: auto;
    }
  </style>
  <body>
    <div class="div1">
      <p>
        Hello Everyone
      </p>
      <h2>
        Include Help welcome's you all
      </h2>
    </div>
  </body>
</html>

The output of the above example is:

In the code, the paragraph tag and heading tag both of these tags are defined under the div tag and the div tag has given a class div1. Now all the properties which I have given to the class div1 will be applied to all the tags which are under that class.

CSS Hash ("#") Selector

ID selector are also known as # selectors. ID selectors are also very important when it comes to add a java script concept to your page. As IDs are always unique, no two elements in HTML can have the same ID. So it is easy to style the elements using their IDs.

HTML Syntax

HTML syntax to define an ID

<tag id="ID_name"> </tag>

Note: The important thing about ID name is that when you write id in HTML then no spaces should be there for example:

Id="one element" is not valid, but
Id="one_element" is valid,
Underscore can be there but spaces are not allowed.

CSS Syntax

#idname
{
    CSS properties;
}

In CSS when you use the Id selector then you have to use the following syntax:

In CSS id selector is denoted with a hash character (#).

CSS Hash ("#") Selector Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <style>
    #element{
    background-color: yellowgreen;
    border: 3px solid rosybrown;
    box-shadow: 3px 2px 3px grey;
    font-size: 40px;
    width:70%;
    font-family: "Gill Sans Ultra Bold Condensed";
    }
  </style>
  <body>
    <div id="element">
      <p>
        Hello Everyone
      </p>
      <h2>
        Include Help welcome's you all
      </h2>
    </div>
  </body>
</html>

The output of the above example is:

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

In CSS, both the dot (.) and hash (#) are CSS selectors. Both selectors are used to select the HTML content/element to define and apply the specific style to the content. The dot (.) selector is a class selector that can be used with the class attribute in HTML elements while the hash (#) selector is an ID selector that can be used with the id attribute.

CSS Examples »

How to create a contact form with CSS?

How to create an email newsletter with CSS?