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!

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

CSS

Posted by Andy Crofford
Andy Crofford
9,959 Points

CSS Class vs. ID

I wanted to make sure I understand classes and IDs.

Say we have an H1 tag that we want to have all the same properties, in this case we would use a class.

If we want the main page header to be different we would use an ID to do this?

I know this seems like a simple concept to grasp and I am not having a ton of trouble with it I just wanted to make sure I was understanding it correctly.

Thanks, Andy

3 Answers

Patrick Cooney
Patrick Cooney
12,216 Points
Patrick Cooney
Patrick Cooney
12,216 Points

More-or-less, yes. Really the difference is classes can be used many times while IDs can only be used once. Conceivably you could create a class that you only use once, though I don't know why you would. So for example you can use a class in place of an ID on a single element but you can't use an ID in place of a class on multiple elements.

I hope that clears things up instead of making it worse.

Andy Crofford
Andy Crofford
9,959 Points

Yes, this was very helpful. I think I understood the concept but it is much more clear now.

rayorke
rayorke
27,709 Points
rayorke
rayorke
27,709 Points

Hi Andy,

Basically the most simple way to think of it is that an ID is unique, where as a class can be used multiple times.

Andy Crofford
Andy Crofford
9,959 Points

Thanks for your assistance, I appreciate it.

Steven Schweibold
Steven Schweibold
7,742 Points
Steven Schweibold
Steven Schweibold
7,742 Points

These answers are all correct, but also keep in mind that IDs have a higher specificity than classes. So when you go to modify or change a style, an ID will override a class or pseudo class every time. It's not entirely recommended to use IDs throughout your project as referenced here: http://oli.jp/2011/ids/

Also, here is a nifty guide on specificity: http://css-tricks.com/specifics-on-css-specificity/

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

The reason not to use IDs everywhere in your CSS is because specificity is like money, you don't want to over pay for something and you don't want to over specify something. All of your selectors should be as specific as necessary but no more as over specifying things can lead to specificity wars.

Steven Schweibold
Steven Schweibold
7,742 Points

This is a much more elegant way of putting it. Thanks, James Barnett.

Andy Crofford
Andy Crofford
9,959 Points

Thanks for your responses, I believe I had an understanding but this just solidified what I thought. I appreciate you both taking the time to respond.