Is it normal to have two elements with same id in

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

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 2

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 3

an id must (should) be unique!!

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

Answer 4

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 5

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 6

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.