Question

While making a quick review on jQuery selectors, I came across this page in w3schools.

In the Some More Examples table, the second row, it says:

$("p#intro:first")  | Selects the first <p> element with id="intro"

It says: the first element with id=”intro”. But AFAIK there can be only one element with a certain id in a valid HTML document.

The question is: is it ever allowed to have two (or more) elements with the same id in a valid HTML document, or this is a mistake in the tutorial? or even in jQuery?!

Is there something I’m missing?

Answer 1

Is it ever allowed to have two (or more) elements with the same id in a valid HTML document,

No

or this is a mistake in the tutorial?

Sort of.

Since you are allowed only one element with a given id, explicitly requesting the first one is redundant … in good documents.

There might be some browsers which will error recover in such a way so as to provide you with multiple results (especially if jQuery passes things on to querySelectorAll rather than getElementById) when you have multiple elements with the same id (in an invalid document) and this might filter out the subsequent ones … but this isn’t something you should be doing in your own documents. It might be justifiable if you are writing JS to run over third party code in a known subset of browsers which you know error recover in that way.