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

HTML How to Make a Website Debugging HTML and CSS Problems How to Fix Problems with Code

Christopher Mlalazi
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 Points
Posted by Christopher Mlalazi
.a{fill-rule:evenodd;}techdegree seal-36
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 Points

Difference btn a .class and #id.

I am finding it tough to differentiate between class and id in CSS, and when to use which where. What is the difference between the two? Is there quick way I can understand them and know when to use them without mixups between the two?

8 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

  1. ID's are unique; Each Element can only have one ID and only one element per page can have that ID.

  2. Class is not unique; Each Element can have multiple different classes applied to it and classes can be used multitiple times on the same page.

  3. An Element can have both an ID and single or multiple classes applied to it.

  4. ID's can be navigated to via # anchor location in browser URL for example: http://website.co.uk/index.html#example will scroll you to the location of the element with the ID "example" applied to it.

  5. In CSS there is no difference between what you can and cant do with an ID or an Class.

  6. In Javascript you can manipulate the classes applied to an element but you can not do this with ID (for example removing or adding classes to an element triggered by a script).

Hope this helps :)

Alexander Lee
Alexander Lee
5,964 Points
Alexander Lee
Alexander Lee
5,964 Points

Referring to a DOM element by ID in Javascript is more than just a preference. It has to do with performance. Selecting by ID will always be faster than selecting by class since as Lucas mentioned there can be only one element with a specific ID. So Javascript won't have to continue traversing the DOM tree once it has found the one item that matches that specific ID whereas with the class it would have to continue searching as there may be other elements with that class. So unless selecting multiple items is your goal, use an ID.

In HTML it's considered good practice to give an ID to a parent element like <body> so that if you wanted to change something only on one specific page you could do so by targeting that page using its ID. For example:

.header { height: 100px; }
#mainpage .header { height: 200px; }
Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

I'll add a couple things not mentioned, by the other fine answers.

As mentioned, you can use a class or an id to hook an element to js or css. In this case there are a few "best practices" you'll find many dev and teams use.

Most all css styles are hooked to classes. Most actionable events are hooked to ids. This also helps when you work on larger projects, if you keep this consistent, you can easily identify html elements that do something because they'll have an id on them.

As far as maintainability, when in doubt it's best to write a style as a class. Even if you don't need that style anywhere else, later down the road you might, and if you do, it's already in a class.

Also, classes and ids hold different specificity. Ids, will hold more specificity points than a class. When you start heavily mixing the two in your stylesheet, you can run into "specificity hell" where some rules won't override others when you think they should, because of specificity. By keeping your css selectors all classes, you level the playing field there.

Here is some more reading on CSS specificity. https://css-tricks.com/specifics-on-css-specificity/

Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points

Really doesn't matter, only difference is that you can set multiple classes for one element but you can only set ONE ID for each element. So I guess when you want to make something more personalized that would be a use.

Also a lot of people when coding javascript like selecting the element by ID so that can be another reason. Not saying you cannot select a class but some people prefer selecting ID in javascript. Other than that not really much of a difference. ID and Class has one purpose and that is to reference and identify the element in the DOM.