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
Boonsuen Oh
18,788 PointsID & CLASS(CONFUSE)
Each element can have only one Id, means
#head {
color: blue;
}
<h1 id="head>Bla Bla Bla</h1> is corret
and unlike class can own more than
one in an
element like this class="class class
class" and id cannot be like id="id id id" Correct?
Can more than one element use same id? (like this
#id {color:blue}
<h1 id="id">heading<h1>
<h1 id="id">heading<h1>
or like this
<h1 id="id">heading<h1>
<h2 id="id">heading<h2>
<h3 id="id">heading<h3>
I tried and it works, all change to blue, so we can use same multiple times in more than one and different element? Instead don't we use class so we can use it more than one time in an element? Confusing can someone explain clearly
2 Answers
Michael Hulet
47,912 PointsThe only difference between id and class is that you're only supposed to use id once in your entire HTML document. Browsers are very forgiving, so it won't cause a catastrophic error if you use an id more than once in your HTML, but you're not supposed to, because that's what classes are for. In other words, something like this is legal:
<div id="1" class="example"></div>
<div id="2" class="example"></div>
<div id="3" class="example"></div>
but something like this is not:
<div id="1"></div>
<div id="1"></div>
<div id="1"></div>
To answer the other question you had, you can't declare multiple ids on an element, unfortunately, which means something like this is illegal:
<div id="a set of multiple ids"></div>
Boonsuen Oh
18,788 PointsYeah, mutiple ids didn't work.
Michael Hulet
47,912 PointsActually, I tried it, too, and when it didn't work, I looked it up. It turns out you can't have multiple ids on the same element. My bad! I've updated my previous answer accordingly
Boonsuen Oh
18,788 PointsSo we can use ID(s) in same element (and also in different element) as long as they are unique and follow the rule 'one ID one usage'. Please verify it is correct or not. :)
Michael Hulet
47,912 PointsI think you have the right idea. You can use an id as long as:
- It is the only place in the HTML file that specific
idis used - It is the only
idon that particular element
Simon Coates
28,694 Pointsthe purpose of id is to be a single unique identifier, when you might need to isolate that one element (for style or JavaScript purposes). Having class and id as two distinct concepts improves clarity (ease of reading, and avoiding ambiguities in code when you request an element by id). Class is for repeated use. Id is when you want to be particular. (and for the record browsers will tolerate or try and adjust for all kinds of things you're not meant to do.)
Boonsuen Oh
18,788 PointsOh! So in JavaScript we can targeting a specific element by ID, if we use classes, then we can't do that. Thanks for answer!
Simon Coates
28,694 Pointsit's mostly that class and id are meant to be used in different cases (id is short for identifier, after all). But this is reflected in javascript. For example, the get methods on the document object . Things are just more predictable if things are used for what they're meant to be used for. (the other important thing is code is for sharing. Non-standard code makes sharing or maintenance a lot harder.)
Julien riera
14,665 PointsJulien riera
14,665 PointsDid your CSS aimed "id" like you wrote it here : "id {color:blue}", or did you type "#id {color : blue;}".
On a global scope :
I hope this is clear.
GL,
Julien