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

Nermin Kekic
Nermin Kekic
6,971 Points
Posted by Nermin Kekic
Nermin Kekic
6,971 Points

Same ID selector in HTML elements?

Hello guys, I am hoping you can help clear this up. I am working my way through the front end development track now.

One of the take away points from the CSS basics is:

"An element can only have one ID, and a page can only have one element with same ID name.

The last part of this statement i found not be true. Bellow is code has two elements that have same ID.

For example if i take this html code, simple HTML file, i have same ID on elements for both h1 and p. Browser will still apply properties correctly on both elements even if they have same ID.

Perhaps this is a not a good practice to do this but from technical perspective it works. Or maybe i misunderstand this as English is my second language. 

<!DOCTYPE html>
<html>

<head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <h1 id="main-title">Learning CSS</h1>
    <p id="main-title">Learning HTML</p>
</body>

</html>

CSS File:

#main-title {
  color: green;
}

3 Answers

Joris Noltes
Joris Noltes
33,824 Points

Hi Nermin,

Basically it means an ID must be unique on a page, #main-title may only appear once in your example.

You might not see problems when applying a style, but you will run into problems when using javascript to get a property from an element with a specific ID, when that ID is not unique.

It's like you're in a room with people, and you are asked to get John Smith's phone number. If there are three people with the exact same name (id) you have a problem.

One trick to keep yourself from mixing this up is comparing id's and classes to people. We all have the class 'human', but our name is what identifies us as unique.

ps. DNA can be considered a better id because it is more unique than a name, but I use name for the sake of this example :)

Susanne Wagner
Susanne Wagner
16,579 Points
Susanne Wagner
Susanne Wagner
16,579 Points

Hi Nermin,

if your site uses IDs which are not unique, your site will not pass validation. Also IDs have some functionalities classes don't have. If you use IDs multiple times these functionalities won't work.

Here is a goo resource on the topic "ID's and Classes": https://css-tricks.com/the-difference-between-id-and-class/

Nermin Kekic
Nermin Kekic
6,971 Points
Nermin Kekic
Nermin Kekic
6,971 Points

Thanks guys, That makes sense now. I will use classes when i want to apply same styles, colors etc across different html elements. And IDs, i will use unique IDs for html elements when i want to apply something specific to that element. Therefore keeping unique IDs for elements is good idea. Also when using javascript having unique ID on elements will avoid bugs with website.

Also another reason to use unique IDs is to pass site validation. I did not know this and will read about more on this. Thanks Susanne.