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 Basics (2014) Basic Selectors Class Selectors

roostermang
roostermang
3,822 Points

Why would you use an id when you could use the more powerful class selector every time in a site build?

I've always wondered about the id. Does it exist just because it was "first" in the css rulebook? I can't think why you would not just use classes every time. Does it have some form of advantage? Maybe are id's good to "take control" of a single element? (For example if you had a page with 300 class selected divs already and you wanted to change just one maybe?)

3 Answers

Gavin Ralston
Gavin Ralston
28,770 Points

Your mom is one reason.

<li class="person">Bob</li>
<li class="person">Bill</li>
<li class="person" id="mom">Mom</li>

Now she can get selected and styled like all the other people, but you could specifically wrap her in css hugs or more easily pick her out of the DOM and display her in a lightbox on Mother's Day

LOOOOOOOOOOL epic answer!!! :D

Ian Bruce
Ian Bruce
10,940 Points

AHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA!!!

Can the same be achieved by adding a second class to the specific person?

Katsumi Suno Of course... but do you have more then one mom? :)

Nope :) But I was wondering if theoretically IDs could be replaced by a class in all cases. Moments ago I posted a question about that very topic https://teamtreehouse.com/forum/how-do-you-think-about-using-class-selectors-over-id-selectors

Katsumi Suno Yup. You will find yourself in a religious war like those that ruby vs php or ruby on rails vs php or blabla. Some are senseless (such as comparing a framework to a scripting language instead of comparing frameworks for example) some make a bit more sense and some are completly clear and still you will have to go against the best pratices to get your job done. For example I use only classes and I try to follow instagram rules giving explicit class names and avoid using more then one (if needed not to overwrite rules or you will have specificity nightmares in the future). I use IDs especially for JavaScript purposes to force that element to be unique in the DOM (bad HTML might have two elements with same ID but if that happens it "forces" you to fix it). In pratical terms you dont need IDs for anything (not even javascript) so it's up to you. By the way... some say that using ID selectors is faster... lol And you also don't need to use classes if you want. In fact you don't even need to use classes neither IDs :D Such freedom... Just think about it once whenever you are starting a project and decide what are your politics in that project. After that project think if it makes sense to apply it to all your future projects or if you will have to rethink it for the next project and move on. Don't waste a lot of time with religious wars. (you should know what the wars are about though!) :)

Hey, thanks for that detailed comment! Gives me some direction, much appreciated :)

Btw: according to this article I've linked, IDs are in fact faster but in such a tiny amount that it doesn't even matter...so...never mind :P

You might check this site for the best answer

[https://css-tricks.com/the-difference-between-id-and-class/]

roostermang
roostermang
3,822 Points

Cheers Guys. Yeah I am seeing the "swiss army knife" applications of the id. I particularly like the diss opener into the (good) answer Gavin!