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

Posted by David Abraham
David Abraham
Courses Plus Student 1,209 Points

Want to know clearly about CSS Class & ID selectors

Hi guys,i'm in trouble.Please help me.I'm confused on CSS Class & Id selectors work. Some people says ID is an unique selectors but i've found that i can use same ID on several elements like Class selectors.Here are two examples that i've made please help me.

/Class Selectors/

<!DOCTYPE html> <html lang="en"> <head>

<meta charset="utf-8">
<title> HTML Basic </title>
 <style>
     .MainHeader{
         background:#556677;
     }   
 </style>

</head> <body> <header class="MainHeader"> <p>It's main Header</p> </header> <footer class="MainHeader"> <p> © 2015 || Sajon Islam </p> </footer> </body> </html>

/*Id selectors */

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> HTML Basic </title> <style> #MainHeader{ background:#556677; }

 </style>

</head> <body> <header id="MainHeader"> <p>It's main Header</p> </header> <footer id="MainHeader"> <p> © 2015 || Sajon Islam </p> </footer> </body> </html>

Daniel H
Daniel H
1,479 Points

You can use id several times but it's not the correct way to do it. A id should ALWAYS be unique and only used once. Meanwhile you can use classes several times.

3 Answers

Joseph Graham
Joseph Graham
Courses Plus Student 58 Points

Yes, the id and class attributes do work in the same way and the web browser treats them the same. However, the implied rule is that no two elements on a page should have the same id, but many elements on one page can have the same class. Although the browser won't render the web page unusually if you use the same id twice, developers see it as more semantically correct to use unique identities. This is because doing this makes reading the source code is a bit easier; if you see an element with an id, you know it is likely to be something that stands out from the rest of the page, because it should be the only element with that particular styling.

David Abraham
David Abraham
Courses Plus Student 1,209 Points

Thank You sir, Joseph Graham. Now i understand

Joseph Graham
PLUS
Joseph Graham
Courses Plus Student 58 Points
Joseph Graham
Joseph Graham
Courses Plus Student 58 Points

Best of luck David Abraham (Bala manush)

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

I want to clarify that web browsers do not treat ids and classes the same when they render the page. When your page loads, the very nature of Cascading Style Sheets, mean that some CSS rules are going to override others. Browsers have to have a way to decide which rule wins, and there are a few ways. One is order the source code. Later CSS rules override earlier rules.

But another one, is CSS specificity. A class in CSS is worth 10 points, and id is worth 100 points. Just by that you can see that a id can easily override a class, or it would take a selector with 10 classes to get to the same specificity of a selector with one id. If you're not careful, this gets very messy, very fast, as you think a rule should override another, but it won't, and you find out it's because it's not as specific as the other. It has fewer css specificity points.

I can't stress how important it is to learn about this - and here is a great resource to do so: https://css-tricks.com/specifics-on-css-specificity/

Generally, it's always best to keep specificity as low as possible, so use classes for styles. Leave ids for special things. Generally my ids do something, like a javascript hook, or a CSS3 animation. If it's css for structure or style, it's always going to be a class, no exceptions. That's my rules anyway.

David Abraham
David Abraham
Courses Plus Student 1,209 Points

Thanks a lot Kevin