Several elements with the same ID responding to one CSS ID selector

Question

Is it safe to give several elements the same ID in one page? For example this often happens, when using some jquery plugins, when you run some slider or gallery twice or more. We know, developers like to give some ID to the html container in order the script works faster.

Let's read w3.org documentation:

What makes attributes of type ID special is that no two such attributes can have the same value; whatever the document language, an ID attribute can be used to uniquely identify its element.

But the next example with 2 elements having the same ID works fine in all browsers, though it's not valid:

#red {
  color: red;
}

<p id="red">I am a red text.</p>
<p id="red">I am a red text too.</p>

Can anybody explain this strange situation?

Answer 1

Browsers always try to "fail silently". What this means is that even though your HTML is invalid, the browser will try to guess what your intent was, and handle it accordingly.

However, deviating from the spec can cause some very unforeseen side effects.

For example:

document.getElementById('red');

will only get you the first one.

You'll also have to test your page in all the browsers that your users might use, to make sure your code works as intended. You can't just assume that it'll work.

In short: Don't do this! If you need to target several elements with the same CSS, use a class name. That's what they were designed for...

---

Having said that; if you really need to select multiple elements with the same ID, use an attribute selector:

document.querySelectorAll('p[id="red"]');

Note however, that this doesn't work in IE7 and below...

Answer 2

Is it safe to give several elements the same ID in one page?

As you know, it's against the validation rules to give more than one element the same ID in a single page. However, rules are broken, and in the world of HTML tag soup, browsers have to account for these broken rules without breaking pages, hence the behavior you observe.

Although browsers have been shown to behave the same way even if you do so (fortunately for situations where it can't be helped), I wouldn't call it totally "safe" to do so, as such behavior may not be consistent or reliable.

The best bet is to follow the rules as faithfully as you can, and only break the rules if you have very, very good reasons to (and you almost never will, so don't even consider it). Otherwise, like Joseph Silber said, use classes, designed specifically for classifying or grouping multiple elements.

Can anybody explain this strange situation?

The uniqueness of IDs in an HTML document is not enforced or assumed by CSS; instead, the Selectors spec simply states this:

An ID selector represents an element instance that has an identifier that matches the identifier in the ID selector.

Notice the use of the word "an" throughout this sentence.

Following that statement are some example uses, which use the word "any" instead:

The following ID selector represents any element whose ID-typed attribute has the value "chapter1":

#chapter1

The following selector represents any element whose ID-typed attribute has the value "z98y".

*#z98y

The assumption of a conformant document is clarified by level 3 of the Selectors spec, near the beginning of the section (emphasis mine):

What makes attributes of type ID special is that no two such attributes can have the same value in a conformant document, regardless of the type of the elements that carry them; whatever the document language, an ID typed attribute can be used to uniquely identify its element.

Where "conformant" refers to conformance to HTML, not CSS. Keep in mind that this text wasn't present in the level 2 spec, which is the one you quote in your question.

Bear in mind that the text that is quoted is not normative. While it's a way of helping implementers work out error-handling cases, it's not a compulsory rule to be followed, and indeed, any implementation is free to behave differently without being in violation of the spec. Don't write invalid HTML just to take advantage of what may seem to be expected or consistent behaviors, because you can't guarantee that these behaviors will remain that way. Any CSS implementation is free to match elements sharing the same ID differently, or even stop matching them altogether, if it decides that's how it should handle documents that break this rule.

In other words: just because you can, doesn't mean you should.

Answer 3

This works with simple HTML styling but will not work with queries.

From the jQuery API documentation:

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.