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
Doug Sammond
872 PointsWhy use id selectors to target elements when class selectors do the same thing?
I understand that Id selectors allow targeting one element on a page and can be used to bring the user to that element by including in the url. However, other than that, it seems like the class selector accomplishes the same thing. Why does it matter that an id is can only be used once in a page? If you only want to target one element, you can just assign a class to one element...
Can someone send an example where the id tag is necessary to target an element that couldn't be accomplished using only class selector(s)?
Thank you! Doug
5 Answers
Cem Salih
15,512 PointsId's have a higher specificity to Class's, so if your styling multiple elements that are similar and are all targeted within the same class, and you want to change one of these elements without changing the class or creating a new one, then adding a id would work and override the class. This is just one example. So if you wanted to change the font colour (color) of just one paragraph out of many, rather than creating a new class that has the some properties and attributes as the former class and simply changing the font colour, you simply add the same class to all paragraphs, but add an id to the paragraph you want to have its font colour changed, and override the font colour. I hope that makes sense, but theres more reasons why ID's and classes are different.
Garrett Levine
20,305 PointsTo be contrary to Cem, I would never use IDs to style anything. As mentioned above they maintain more specificity, and can really be a pain to overwrite and can lead to a lot of strange and unexpected behavior with conflicting styles. In my opinion it is REALLY important to maintain the same level of specificity across all elements, so all that matters is the cascade (the lower cascade style takes precedence). I do this be ONLY targeting classes, and never targeting elements or IDs with my CSS.
Often IDs are used more when interacting with JS because they are easier for JS to target an element.
Cem Salih
15,512 PointsAlthough your answer is true, it didn't technically answer his question? Plus if you've done the CSS track on this site then you should know that your answer will probably bring confusion, because we use id's in the tutorials. So, its good practice to maybe not use id's in the future, but whilst learning they can and still do get used, and include a good learning curve with dealing with conflicting styles (You never know when your going to be working on a project that uses ID's and will require at least the knowledge to fix the conflicting styles). I am only a beginner myself, but i thought this comment was relevant because its similar to when i go onto stack-overflow, sometimes I'm presented with what feels like more opinions than the actual answer itself.
Doug Sammond
872 PointsThat makes sense. Thanks for the response. One could do that by creating a distinct class and applying it to the one paragraph, but you would have to re-declare all of the properties except for the one you wanted to change. It would be simpler to create an id with a single property to over-ride the class selector.
I'm still wondering why it's useful that id selectors are only allowed to be used once on a page, whereas classes can be used multiple times. I think I'm missing something fundamental here...
Enrique Padilla
33 PointsWell when you are beginning to use javascript and jquery you will be using id's more often since they use id's often for targeting specific elements from DOM (Document Object Model).
I tend to use id's for div elements that divide the body of the page. Since these are individual sections of a page that will most like not change throughout all the pages of my website and doesn't need to apply to several other elements.
Doug Sammond
872 PointsThanks for everybody's response to this question. I picked up a few useful pieces of information regarding the use of id's vs classes. Nobody has responded with a scenario that would require the use of an id tag to target an element. Cem's response shows where it might save a little time to use an id tag, but I think even that situation could be handled using only classes. It sounds like the best practice is to avoid using id tags to target styling and that they are more relevant for targeting javascript.