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

Posted by Tejas Potdar
Tejas Potdar
6,594 Points

When do you use class vs id elements?

We use class to name the main div's and headers etc. When do we use the element 'id'?

4 Answers

Nick Ocampo
Nick Ocampo
15,661 Points

I always have trouble understanding these things without real-world examples, so here's an example of how I personally use classes and ids most of the time.

I'll use classes instead of ids pretty much all across the board if I can. The only times I will use ids are when:

-There are several elements styled with one or more classes, but I want one of them to be different. For instance, I have 5 blue circles with black borders with a class of "circle." Let's say now I want to make only ONE of the circles have a red border. I will add an id to it and place those styles to the id. Since ids have a higher specificity than classes, whenever there are conflicting instructions between a declaration in an id and a class, CSS will always pick the id over the class.

-I also use ids for functionality that I add dynamically using javascript. That way I can rest assure that whatever changes I am making dynamically through javascript will not be overridden by css styles or anything like that.

Those are just two examples, but the whole point is that ids have a higher specificity. As far as your browser is concerned, an id is more important than any class.

Michael Alaev
Michael Alaev
5,415 Points
Michael Alaev
Michael Alaev
5,415 Points

ID's is for an element that will not repeat on your page / markup. for example a for with an id of signup.

Class's is for an elements that will repeat for example a div with an class of CTA(call to action) that will be shown in the header of the page and ones again above the footer element.

You will understand better when you start the layout css course. (its a great one to understand good use of classes and ids)

Hope that helps. Mike.

Tejas Potdar
Tejas Potdar
6,594 Points
Tejas Potdar
Tejas Potdar
6,594 Points

Yes! That helps a lot. So if an element was not going to repeat, it would be fine to use the element ID and then accordingly add that in CSS?

Michael Alaev
Michael Alaev
5,415 Points
Michael Alaev
Michael Alaev
5,415 Points

you can use a class as well (and its even better to use classes then ids) the best practice is to use ID for big and important elements in your page. you also can add id and class on the same element if you real need to.

<div id="someIdName" class="color-red"></div>
Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Tejas,

An id can be used in only one location on any given web page. A class** can be used as many times as you want.

<div id="some-id">
</div>

<p id="some-id"> <!-- No no, this id already used -->
</p>

<div class="some-class">
</div>

<p class="some-class"> <!-- OK -->
</p>

<span class="some-class"> <!-- OK -->
</span>

<div class="some-class"> <!-- OK -->
</div>

Jeff