Several Elements With the Same Id Responding to One CSS Id Selector

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

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

What error will i get if i use the same ID for multiple HTML elements?

It would be invalid HTML.

In some environments, it may produce a console warning that multiple IDs in a single document is invalid. Harmless, but annoying.

It will prevent document.getElementById from working properly for those elements, because getElementById selects by ID, but there should only be one element with a given ID in the document. Similarly, it may prevent querySelector and querySelectorAll with ID selectors from working properly.

Using the same ID multiple times may well not break your application in most cases, but just because it might be doable in some circumstances doesn't mean it's a good idea. There's no reason to do it, so don't.

Can you use the same ID with different element types in CSS?

I know this is invalid HTML

Correct

Is this also invalid?

Yes. An ID must be unique in the document. Not unique per type in the document.

(That won't stop browser error recovery from sometimes giving you the result you are trying to achieve, but you should not depend on that).

and something like

You can't use .#. A . starts a class selector. A # starts an ID selector.

You can have

div#sally { ... }
p#sally { ... }

And then have two different documents, one with a div with that ID and one with a paragraph with that ID, but both of which <link> to the same stylesheet.

If you want to identify two things are being in a group, then use a class. That is what class is for.

Using CSS selector to find an element with same ID as another, but different class

Duplicate IDs are not valid in an HTML document, and will cause issues with scripting especially, so their use is widely considered bad practice. There aren't any situations where having elements with a common ID is justified over having a common class instead. You should correct the duplicate IDs if you can to prevent potential complications with your lightbox API and elsewhere.

That said, in a situation where you can't de-duplicate the IDs, your proposed solution (chaining ID and class selectors) will work. A lone ID selector in CSS will match all elements with a given ID regardless of whether or not they're duplicates, so using a class selector to differentiate them is reasonable. Further reading.

Can we style multiple html tag by one id selector?

Although that works, this is not valid html, because the document is supposed to have unique, non-duplicated ids. If you run that code through some validator, it will give you an error.

If you want same styles applied to multiple elements, you need to look at css classes.

Can multiple different HTML elements have the same ID if they're different elements?

No.

Element IDs should be unique within the entire document.

---

Related Topics