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 ID Selectors

Posted by Johnny Garces
Johnny Garces
Courses Plus Student 8,551 Points

ID's can't be used more than once

I'm still unclear about the usage restrictions of IDs. In the workspace example, I added the same ID (#primary-content) with the following CSS properties,

primary-content {

background-color: red; border: 1px solid black; }

I included this same ID to various elements on the index.html file and the CSS properties were applied.

It would seem that IDs could be used more than once and on different elements as well?

Any help would go a long way, thanks!

5 Answers

Dan Garrison
Dan Garrison
22,457 Points
Dan Garrison
Dan Garrison
22,457 Points

ID's are supposed to be unique. If you need to apply the same css styling to multiple elements then you should be using a class. Why the distinction if it seems to be applying the styling? Well, the distinction becomes very important when you start to add interactivity to your site using JavaScript or if you want to link to specific sections in the html on the same page.

Keep in mind that you can reuse ID's if they are on a different html page. So you could use the same ID on a index.html and an about.html page.

Johnny Garces
Johnny Garces
Courses Plus Student 8,551 Points

I completely agree that the distinction becomes evident when JS is involved, i.e. getdocumentbyID().

It's hard to believe that browsers won't punish code that violates ID "uniqueness"- I threw the same ID around different elements and the styles were applied.

There should be some error to let devs know that IDs should be unique. Thanks, Dan!

Dan Garrison
Dan Garrison
22,457 Points
Dan Garrison
Dan Garrison
22,457 Points

HTML and CSS is generally a bit more forgiving than other programming languages and errors aren't really thrown. At the end of the day, it really comes down to how the browser is going to interpret the information on the HTML and CSS files. I suppose a browser could throw some sort of uniqueness error and decide not to render the information, but then people might stop using your browser because of the mistakes of other developers.

That being said. It's usually best practice to validate your HTML and CSS using the following Validator services:

Those uniqueness errors (as well as other errors) are what those validators are designed to catch.

Jeffrey Lego
Jeffrey Lego
9,458 Points
Jeffrey Lego
Jeffrey Lego
9,458 Points

ID's can only be used once - they have to be unique. It is the identity. You can't have two primary contents. You can have two sub contents though, which would be classes. The w3c has information you may find useful: http://www.w3schools.com/css/css_selectors.asp

Jordan Michaels
Jordan Michaels
1,635 Points
Jordan Michaels
Jordan Michaels
1,635 Points

When I add the ID to another Div element it does work... I thought they can only be used once?

Jeffrey Lego
Jeffrey Lego
9,458 Points

See the comment below by Dan Garrison. I should have said "Should only be used once."

Albert González
Albert González
22,953 Points
Albert González
Albert González
22,953 Points

ID's are unique, classes are NOT unique!

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Hi,

Short explenation: the ID can be assigned only to one tag in your code with a specific id name on that same page.

Meaning that if you take the tag <nav id="nav-tag"> it has the id tag "nav-tag" hooked to it. And because of that you cannot set another id to that nav tag : <nav id="nav-tag second-tag"> is not possible.

For better clarification you can check CSS Tricks

ivomiranda
ivomiranda
30,286 Points
ivomiranda
ivomiranda
30,286 Points

HTML is a markup language. Your browsers will read this markup language and each browser will try to "fix" broken HTML as good as possible. That's why bad and invalid HTML sometimes is still perfectly shown on your browser because browser is doing all the work. Despite you can give the same ID to different HTML tags that is not semantically correct (in other words, by looking only at your HTML I cannot understand why a unique ID appears twice). Furthermore you might have problems in the future if browsers decide to treat differently your invalid HTML, not to mention the problems you will also probably have with JavaScript.