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
#- is an id selector that styles the element with the specified
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.
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 rule above, only the following html element would be styled
with a blue background.
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.
The above rule will only style the element with the attribute
<div> tag does below.
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