The Difference Between Class Selectors and ID Selectors in CSS

If you are new to CSS then you’ll probably have noticed that some rules have selectors that start with # and some that start with . and even some that have none at all. The difference between the two is that the # rule is an id selector and the . is a class selector.

• . - is a class selector that target elements with the correct class attribute.
• # - is an id selector that styles the element with the specified id attribute.

When I was initially learning HTML and CSS I was hit by this stumbling block a number of times and knowing this distinction between class selectors and id selectors can save you a lot of time.

Class Selectors

In CSS we have this concept of selectors, in order for us to be able to style our html elements correctly, we have to ensure we use the right selector in the right place. Say, for example, we wanted to style all <div> elements that feature the class equal to blue with a blue background. We’d have to create a CSS rule that applies to the .blue selector.

.blue {
  background-color: blue;
}

With this .blue rule above, only the following html element would be styled with a blue background.

<div class="blue"></div>

ID Selectors

If we want to style a html component that features an id attribute that equals blue then we have to use the # id selector which will style the single element tagged with this id.

#blue {
  background-color: blue;
}

The above rule will only style the element with the attribute id="blue" like our <div> tag does below.

<div id="blue"></div>

Summary

If you found there was something lacking about this tutorial then please feel free to let me know in the comments section below! If you wish to make any changes to this particular tutorial then you can also submit a pull request to the github repo for the site here: TutorialEdge.net