Is it normal to have two elements with same id in two div elements with other id?

Question

I know, that two elements can't hav the same id. But it's happens so, that in my project I have two elements with same id in other divs, like this

<div id="div1">
     <img id="loading" />
</div>
<div id="div2">
     <img id="loading" />
</div>

And CSS:

#div1 #loading
{
    some style here...
}
#div2 #loading
{
    another style here...
}

Works fine for me, but maybe it is not reccomended to do by so?

Yes, I know, thet I can use classes, and it's strongly recomended to do by so, but I want to know is there any potential risk in this usage of id? I think no, because when I wrote for example

$("#div1 #loading")... it becomes a unique element. Isn't it?

@Syom: it may well work just fine with CSS, but you'll almost certainly have problems if you try and get those elements in Javascript. — Andy E, Jun 22 '10 at 12:41
@Andy E's head i use Jquery, and call them the same way thet in css. ie $("#div1 #loading")...? are there any potencial risk? — Simon, Jun 22 '10 at 12:43
ID is short for *identification* ... so it must be **unique**. Accept it and live a happy life :) Why fight against specification? Only because something works in some circumstances does not mean you should do it that way and that it will work in all cases. — Felix Kling, Jun 22 '10 at 12:43
It is defined that it has to be unique: http://www.w3.org/TR/html401/struct/global.html#adef-id Theoretically you could do it the way you did by specifieng the parent too when getting the div, but what if it is in a deep structure? An id is there to identify something (like Felix Kling said). To use same CSS for more elements the class attribute was specified for. So why not just use things how they should be used ;) — enricog, Jun 22 '10 at 12:49
@Syom, Thats a very tricky and dirty way to get the things done? Not Recommended — Starx, Jun 22 '10 at 12:49
@Syom: with jQuery, using the selector `$('#loading');` would return only one item in IE6 and 7 (not sure about 8 as it supports `querySelectorAll`). I'm not sure about `$('#div1 #loading');`, it depends on jQuery/Sizzle's internal optimisations. — Andy E, Jun 22 '10 at 12:59
Thanks much for interesting discussion. i start loving this site more and more:/ — Simon, Jun 22 '10 at 13:16
Final Update Use suggested principe, if you have reasons to do that! ;) — Simon, May 30 '18 at 14:46

Starx · Answer 1 · 2010-06-22T12:43:57.513

Change your id to class. It is not a good idea to give duplicate id.

Think two students having same roll no in a class. Imagine them getting examination result. How will the school be able to recognise the marksheet?

Your way is not cross browser compatible, and will affect a lot while coding JavaScript, and posted form etc

You can get the same effect using class

see

<div id="div1">
     <img class="loading" />
</div>
<div id="div2">
     <img class="loading" />
</div>

and css:

#div1 .loading
{
    some style here...
}
#div2 .loading
{
    another style here...
}

score 13 · Answer 2 · answered Jun 22 '10 at 12:38

13

an id must (should) be unique!!

you will have troubles selecting it via JS in most browsers - better use class

answered Jun 22 '10 at 12:38

helle

11,183
9
56
83

score 6 · Answer 3 · answered Jun 22 '10 at 15:54

The big reason is for JavaScript DOM manipulation. In your case, if you do something like this...

document.getElementById("loading")

... JavaScript will return the first element, and the first element only. You'll have no way to access the rest of them without some serious DOM walking.

score 4 · Answer 4 · edited Jun 20 '20 at 09:12

4

Just because no-one else has posted it - the HTML spec, section on ID, which says:

id = name [CS]

This attribute assigns a name to an element. This name must be unique in a document.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 23 '10 at 07:15

Damien_The_Unbeliever

234,701
27
340
448

I'm slightly mystified - in the last day or so this has received a downvote and an upvote. Yes, it's poor by my later standards; perhaps this is the equivalent of undefined behaviour in C or C++. The OP is layering poorly defined semantics (if IDs should be unique, what happens if they are repeated?) with observed behaviour and hoping someone would tell them it was okay. I was pointing to the first point at which they left the rails. – Damien_The_Unbeliever May 30 '18 at 16:59

Kyle · Answer 5 · 2010-06-23T07:04:52.843

3

IDs should be unique, so id1 and id2 are fine, but for many elements with the same style, use an HTML class and CSS class selector:

.loading
{
styles here
}

These are allowed to be repeated as many times as you want on a page :)

edited Jun 23 '10 at 07:04

answered Jun 22 '10 at 12:39

Kyle

65,599
28
144
152

1

HTML class. CSS class selector. No such thing as a CSS class (and the term is abused in enough different ways that it can be confusing) – Quentin Jun 22 '10 at 15:57

score 3 · Answer 6 · answered Jun 22 '10 at 12:40

3

Yes you are right, it is not recommened to do so. An ID should always be unique (e.g. if you want to select the element with javascript). If you just want to add the same style to the divs, just use css class.

answered Jun 22 '10 at 12:40

enricog

4,226
5
35
54

score 3 · Answer 7 · answered Jun 22 '10 at 13:07

Unique:

In mathematics and logic, the phrase "there is one and only one" is used to indicate that exactly one object with a certain property exists.

#div1 #loading does not remedy the fact that you have two instances of #loading in your document. So, no, don't do that.

score 2 · Answer 8 · answered Jun 22 '10 at 12:49

2

Is it normal? No.

Is it recommended? Definitely not! It's actually prohibited (but enforcement is weak).

But it (apparently) works, so ...

answered Jun 22 '10 at 12:49

Kenny Evitt

9,291
5
65
93

score 1 · Answer 9 · answered Jun 22 '10 at 14:31

Id are used to distinguish elements, they must be unique for different reason, one of them is the use of javascript, function like getElementById won't work well if you have duplicate ID, you won't be able to predict what it'll do on different browser as JS is self-implemented on each browser differently.

If you wish to use a structure like #div loading and #div2 loading it seem clear that both loading have similar uses so they should be classes and would be used like this

#div1.loading and #div2.loading

Also one plus of using this syntax would be to put the common style in .loading like this

.loading{ style common to both the loading }

#div1.loading{ style used only by the loading in div1 }

#div2.loading{ style used only by the loading in div2 }

Simon · Accepted Answer · 2018-05-30T14:35:51.157

1

https://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#adef-id

BUT!

If you need it in your project, you can use it, like suggested in my Question Final Update!

edited May 30 '18 at 14:35

answered May 30 '18 at 14:20

Simon

22,637
36
92
121

score 0 · Answer 11 · answered Jun 23 '10 at 07:08

validation and purist-ism aside, it is perfectly functional. But I would definitely be annoyed if I use that #loading id and find that a jquery effect or a css effect applies to more than 1 element.Do tell me if IE6 or 7 or Firefox 1.x or 2.x ruins that code.

score 0 · Answer 12 · answered Oct 15 '15 at 04:14

It's bad practice of using I'd on element. Because I'd giving something for understanding unique with their name identification. And second thing we use its in CSS but in JavaScript this bad practice. So good example for this class and student.

So don't do this.

score -3 · Answer 13 · answered May 10 '12 at 15:08

-3

I disagree on people saying to always use a "unique", meaning different ID everytime you label one. Sometimes its acceptable, such as my case where I am making a calculator.

The javascript is doing the math and outputting the result into the div with the id="total". I need that same exact "total" to be in 2 different places however. In this case, why wouldn't I use two different div's with the same ID? I need the same number in both boxes. With jQuery, I perform and output the math once and it populates both div's at the same time, which is what I want.

So long as you understand the risks where if you were PULLING information from those 2 div's with the same ID, then I say feel free. As long as you dont confuse yourself and need 2 different results in the same div ID.

answered May 10 '12 at 15:08

Nick

11

3

The prudent coder uses valid HTML for many reasons. First among these is consideration for the maintainer who will pick up his code later. Valid HTML uses unique ID attributes. – David Gorsline May 10 '12 at 15:30
3

I don't downvote many answers but I'm willing to make an exception for ones that encourage people to wilfully ignore published standards. – Flexo May 10 '12 at 19:51
You seem to be using `id` where you should be using `class`. If you use a hammer as a screwdriver, don't be surprised if you break a few screws. – Andrew Barber May 11 '12 at 02:43
yep man! Everything is not that kind of esy, in our universe ;) – Simon May 30 '18 at 14:17

Is it normal to have two elements with same id in two div elements with other id?

13 Answers13

Linked