Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Similar to ID selectors, class selectors let us target elements based on their class attribute. The main difference between a class and an ID selector is that IDs are unique and they’re used to identify just one element on the page, whereas a class can be used to classify and target more than one element. This makes classes more flexible than IDs. Let's see how they work.
Further reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Similar to ID selectors,
class selectors let us
0:00
target elements based on their
class attribute. The main difference
0:03
between a class and an ID selector
is that IDs are unique and
0:09
they're used to identify just
one element on the page.
0:13
Whereas a class can be used
to classify and target more
0:18
than one element. This makes
classes more flexible than IDs.
0:23
Let's see how they work.
0:27
Class selectors are defined with
the dot character followed by the
0:30
class name. Let's see what happens
when we change this education ID
0:35
selector to a class selector. To do
that, we'll replace the pound sign
0:41
with a dot. Now our selector is
a class. If we go back and take
0:46
a look in the browser, our red
border is gone. That's because
0:52
class selectors only target elements
with matching class attributes.
0:57
So we'll need to go back
into our HTML file and
1:03
replace the ID attribute
with a class attribute.
1:07
When we save our HTML file and
take a look in the browser,
1:13
we can see how the class
selector is targeting this
1:18
section element and once
again applied the red border.
1:22
Now, you might ask, since
education works fine as a class
1:27
or an ID, which one
should we use?
1:33
Since I'm 100% confident that
the education section is unique,
1:36
I'm going to undo what I just
did and make it an ID again.
1:42
I like to use classes when I know
a selector won't be unique or
1:48
when I'm not sure whether
it will be unique or not.
1:53
Classes let us target more than one
element with the same class name.
1:59
In fact, that's one of the biggest
advantages to using class selectors.
2:05
Multiple elements can
share the same class, so
2:10
we're able to reuse
them throughout a page.
2:13
Remember, we're not allowed
to do that with IDs.
2:16
In the last video, I suggested
that Developer Diane might like to
2:21
highlight some of her front end
web development skills visually.
2:25
Let's create a class in our CSS
that we can use multiple times.
2:30
Then we can apply that class multiple
times in our HTML to highlight
2:50
Developer Diane's HTML, JavaScript,
and mobile web development skills.
2:56
And there you go, multiple
skills are highlighted.
3:15
Now, if you're not in love
with this bold font and
3:21
my choice of a teal background
with papayawhip text, no worries.
3:24
As you get more comfortable
working with CSS selectors,
3:31
you'll be able to create
your own designs.
3:35
Like with IDs, naming the
class is up to you, as long
3:39
as you start with a dot and
follow the same rules as before.
3:43
Don't use spaces and avoid
punctuation other than hyphens
3:48
and underscores. And again, it's
best to apply meaningful names
3:53
that explain the purpose of the
class, as I did with top-skill.
3:58
Thinking back to working with IDs
for a moment, hopefully you'll
4:04
remember that not only must IDs
be unique within your HTML page,
4:08
but that each element can have
only one ID applied to it.
4:13
Classes are different. You can
apply as many classes as
4:18
you want to a single HTML
element. Let's say Developer
4:22
Diane wanted to make the dates
stand out on her resume.
4:27
We'll create a
class called date.
4:31
And I'll apply that class to each
p element in my HTML
4:49
containing a date.
4:53
And look at that, each of
these three dates has a steel
5:16
blue border with rounded
corners. Now, let's say some
5:20
of this information is special
and Diane really wants to
5:24
highlight her grad date from
Treehouse and the dates
5:29
of her current job. We'll
create a class called special.
5:33
And then add that class to
the appropriate places in my HTML.
5:53
To add multiple classes
to the same attribute,
6:09
just separate the class
names by a space.
6:13
And great, it looks like those
two dates are in uppercase
6:19
letters and have a
papayawhip background.
6:23
You can add as many classes
as you want to a single
6:29
element. Just keep
separating them by spaces.
6:33
So then you might ask,
is it possible to add a class and
6:37
an ID to the same
HTML element?
6:42
It is.
6:45
Let's say that Developer Diane is
really proud of her JavaScript skills.
6:46
She might want to create an ID
called proud to show that one off.
6:52
I'll then add another attribute to the
list item where JavaScript is featured.
7:10
Okay, that worked, but
I've created a bit of a
7:31
conflict here. Let's notice
how my top-skill class
7:35
says that my background
should be teal, but the proud
7:44
ID says that the background
color should be firebrick.
7:48
If we look in the browser,
the background is firebrick.
7:53
How did the browser resolve
this CSS conflict? We'll learn
7:58
more about how CSS conflicts
get resolved in a future video.
8:03
But for now, it's worth knowing
that IDs carry more weight
8:08
than classes because they refer
to something very specific.
8:12
So if an element has an ID
and a class applied,
8:17
the styles defined in the ID
selector will always carry more
8:21
weight than the styles defined
in the class selector.
8:26
If we're not careful about
how we use classes and IDs,
8:31
we can end up overriding
styles in class selectors.
8:35
That's why we need to make
sure we don't share the
8:39
same properties between
classes and IDs. I'm going
8:43
to remove the background color
declaration from my proud ID,
8:46
since it's not good practice
having the conflict there.
8:52
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up