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

CSS CSS Foundations Selectors Class and ID Selectors

div class="container" - why not "id"?

Why have we given the container a class name and not an ID?

The container is only one element isn't it?

5 Answers

Kevin Korte
Kevin Korte
28,148 Points

One page could easily have more than one container class. Maybe I want 6 divs that span the full width of the screen with a background image, but I wont the content centered and contained. Each div would use the same container class, thus a class is necessary.

I don't use ID's too much. My default is always a class. If I'm going to use an ID, I need to have a specific reason for doing so. Maybe it's link it to an anchor on that page so the screen moves to that div. Maybe I'm doing something with Javascript with it. But if it's just a hook to style it with CSS, I use a class since it offers more flexibility as the code grows and evolves.

I for one generally don't understand why classes are not being used for everything. I don't see the point in using ID's and remembering which elements are given ID's and which are given classes, when they are able to do the same. As far as I understood ID's take precedence over classes in styling, but I would rather control that manually and otherwise.

I understand that when dealing with JavaScript there are different rules at play.

Lets say you have a logo on the top left corner of your site, which has specific styling and does not reoccur on your pages it would be a weird giving it a class. This also counts for footers, menu's and so on. Also when accessing a class within javascript you'll get a array with objects rather than just an object. For SEO purpose it makes no difference by the way.

So in the end, you can use classes for your CSS and ID's for JS which is good practice. Some say keep those separate but I dont mind using an ID now and then when i'm accessing specific elements in CSS.

Lets say you have a logo on the top left corner of your site, which has specific styling and does not reoccur on your pages it would be a weird giving it a class. This also counts for footers, menu's and so on. Also when accessing a class within javascript you'll get a array with objects rather than just an object. For SEO purpose it makes no difference by the way.

So in the end, you can use classes for your CSS and ID's for JS which is good practice. Some say keep those separate but I dont mind using an ID now and then when i'm accessing specific elements in CSS.

Thank you both for the clarification.