Home/ Questions/Q 8036773
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T02:43:56+00:00

I’m learning in CSS, I am really confused when to use . (dot) and

  • 0

I’m learning in CSS, I am really confused when to use .(dot) and when to use # in CSS file. Sometimes I really wondered which one I should use.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    #You are .Human

    While there are many humans, there is only one you. As such, . is for classes, which can appear over and over in a document. # is for IDs, which are unique to a document.

    <div class="firstname" id="personA">
    <p class="lastname">Sampson</p>
</div>

<div class="firstname" id="personB">
    <p class="lastname">Sampson</p>
</div>

    Note the unique identifier for both div, personA and personB. However both elements have classes in common, such as .firstname, and .lastname.

    Professional Examples

    You can see how these are used out in the wild by looking at tools like Modernizr. This feature-detection tool assists you by adding classes to the <html> element that inform you as to what the device or browser is capable of:

    <html lang="en" dir="ltr" 
      id="modernizrcom" 
      class="js no-touch postmessage history multiplebgs boxshadow...">

    Here we see the one unique value for the <html> element, #modernizrcom. Following, a series of classes that give more general info about the element. This is a clear example of how an element can have only one id, but many classes.

    Careful with those IDs!

    Because these values are completely unique, they can cause you to paint yourself into a corner at times. It’s worth reading Disallow IDs in Selectors to know more about the potential issues with using IDs in your selectors.

    • 0