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?

Ganef

is there a browser you know, where it doesn't work? – Ganef

@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. – Wolfenbarger

@Andy E's head i use Jquery, and call them the same way thet in css. ie $("#div1 #loading")...? are there any potencial risk? – Ganef

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. – Disagreement

It is defined that it has to be unique: 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 ;) – Raffinate

@Syom, Thats a very tricky and dirty way to get the things done? Not Recommended – Oilcup

@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. – Wolfenbarger

Thanks much for interesting discussion. i start loving this site more and more:/ – Ganef

Final Update Use suggested principe, if you have reasons to do that! ;) – Ganef

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

Ganef

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

Oilcup

Answer 3

an id must (should) be unique!!

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

Renault

Answer 4

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.

Handicraftsman

Answer 5

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.

Discolor

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. – Discolor

Answer 6

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

Koralle

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) – Wale

Answer 7

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.

Raffinate

Answer 8

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.

Billie

Answer 9

Is it normal? No.

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

But it (apparently) works, so ...

Annia

Answer 10

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 }

Amicable

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.

Ophicleide

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.

Toxicity

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.

Kr

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. – Pralltriller

I don't downvote many answers but I'm willing to make an exception for ones that encourage people to wilfully ignore published standards. – Nieshanieto

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. – Feudatory

yep man! Everything is not that kind of esy, in our universe ;) – Ganef