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

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?

Thanks

UPDATE

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, becouse when i wrote for example

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

Final Update

Use suggested principe, if you have reasons to do that! ;)

Answer 1

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...
}

Answer 2

an id must (should) be unique!!

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

Answer 3

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.

Answer 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.

Answer 5

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.

Answer 6

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.

Answer 7

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 :)

Answer 8

Is it normal? No.

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

But it (apparently) works, so ...

Answer 9

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 }

Answer 10

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!

Answer 11

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.

Answer 12

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.

Answer 13

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.