html - behavior of browsers for css application when multiple elements share same id

Question

I understand that IDs are supposed to be unique in HTML documents. But a lot of HTML pages are sloppy and don't follow the rule. My question is: how do browsers handle CSS applications for multiple elements sharing the same id?

On my preliminary testing it seems that they apply the id specific CSS rule to all elements with the same id. This behavior seems to be common on IE 8, Chrome, Firefox, Opera.

Is this the sensible choice that browsers make to handle such sloppy HTML or are there exceptions to this behavior? What can be unintended consequences in CSS layout due to sharing of same id amongst multiple elements?

Answer 1

You're right as far as CSS "pretty" display goes, the error recovery is to apply the CSS as if it were a class.

What can be unintended consequences in CSS layout due to sharing of same id amongst multiple elements?

Not much to the actual CSS layout, as mentioned above but..

you might not be able to specifically target (isolate an element) if you need to, and/or the specificity of a selector needed to override a CSS rule with an ID already in it could only be done by adding a unique ID further up the ascendency (or adding an inline <style>)

also don't think you'll get on very well if you need to use jQuery or something like that, Javascript relies on the ID's for best functionality

ID's are also Fragment Identifiers - they won't work too well if they're not unique