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

by

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…

More Related Contents:

  1. Understanding CSS selector priority / specificity
  2. CSS Pseudo-classes with inline styles
  3. How can I select the last element with a specific class, not last child inside of parent?
  4. Are class names in CSS selectors case sensitive?
  5. Why doesn’t table > tr > td work when using the child selector?
  6. Matching the first/nth element of a certain type in the entire document
  7. Using CSS :before and :after pseudo-elements with inline CSS?
  8. How can I correctly select the first or the last child with CSS?
  9. Using :before and :after CSS selector to insert HTML [duplicate]
  10. :nth-child(even/odd) selector with class [duplicate]
  11. How to CSS: select element based on inner HTML [duplicate]
  12. What is the performance impact of the universal selector?
  13. What are the priorities among CSS selectors
  14. Why is nth-child selector not working?
  15. CSS selector with period in ID
  16. Can a ::before selector be used with a ?
  17. What is the ::content/::slotted pseudo-element and how does it work?
  18. CSS Selector “(A or B) and C”?
  19. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  20. How to get CSS to select ID that begins with a string (not in Javascript)?
  21. How do I select an element that has a certain class?
  22. Selecting the last element among various nested containers
  23. Zebra striping a flexbox table with wrapping items
  24. CSS attribute selector does not work a href
  25. How to use nth-child for styling with a table with rowspan?
  26. CSS Selector for No-Children-But-Not-Empty
  27. Is there a CSS not equals selector?
  28. How to select classes with spaces
  29. CSS nth-match doesn’t work
  30. Targeting text nodes with CSS

Leave a Comment