Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Daniel Griego
Daniel Griego
3,561 Points

Class Vs ID

I was wondering what the exact difference was between the two? When is it appropriate to use a class and when to use an ID? Or is that entirely up to you?

Guil Hernandez
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Daniel Griego,

I discuss that topic in detail in my brand new CSS Best Practices Workshop. The "Class vs ID" discussion happens at the 14:53 mark.

Hope this helps. :)

Daniel Griego
Daniel Griego
3,561 Points

ah, I just watched it and it did bring a lot of insight on how to pair your css with javascript. Thank you for the vid:) Some good stuff

1 Answer

Adam Fichman
Adam Fichman
9,502 Points
Adam Fichman
Adam Fichman
9,502 Points

ID's are more specific than classes. ID's are unique, classes are not. Say you have:

<nav id="main-navigation">
    ...
</nav>

This means that no other element on your page can have the ID of main-navigation. Also, any element can only have one ID at a time.

Classes on the other hand are a different story. They are reusable on as many elements as you wish. Elements can also have multiple classes. So you could have:

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

So typically speaking, if you know you're going to want to use an element multiple times, assign it a class. However if it something unique that is only going to be used once per page, give it an ID. Some people argue that you should only use classes, however, what's really important is that you understand when to use one or the other, and what choosing one over the other is going to mean for you further down the project.

There are a lot more differences than what I've listed. Understanding the difference is pretty important so I suggest reading up on it and making sure you understand it. For your CSS, choosing to use an ID or a class is going to affect your specificity which if you don't fully understand, will lead to lot's of hair pulling and headaches.

Take a look at this article from Css-Tricks for a pretty good look at specifics on CSS specificity.

Good luck!

Daniel Griego
Daniel Griego
3,561 Points

thanks for the article, this definitely helped me!

James Barnett
James Barnett
39,199 Points

Some people argue that you should only use classes, however, what's really important is that you understand when to use one or the other

For IDs with CSS, there is an ever present danger of over-specifying your CSS and getting into specificity wars. My rule of thumb is treat specificity as a precious resource, never use a class with an element selector will do and never use an ID when a class selector will do.