In the DOM are node ids case sensititve?

Question

Is this HTML valid? Or is the id 'a' the same as the id 'A'?

<div id="a">alpha</div>
<div id="A">Alpha</div>

Answer 1

Yes. It is case-sensitive. Attribute values are always case-sensitive. Different browsers seem to be doing different things though.

Handling document.getElementById is different across browsers:

1. Mozilla performs case-sensitive search.

2. Internet Explorer: IE 8 and later performs case-sensitive search, while IE 7 and earlier performs case-insensitive search.

Answer 2

Bit of clarification here since all the above answers are only partially correct. In the context of the DOM and Java Script yes, ID's are case sensitive. In CSS they are not, as CSS is entirely case insensitive.

http://www.w3.org/TR/css3-selectors/#casesens

All Selectors syntax is case-insensitive within the ASCII range (i.e. [a-z] and [A-Z] are equivalent), except for parts that are not under the control of Selectors. The case sensitivity of document language element names, attribute names, and attribute values in selectors depends on the document language. For example, in HTML, element names are case-insensitive, but in XML, they are case-sensitive. Case sensitivity of namespace prefixes is defined in [CSS3NAMESPACE].

Because of this it is a bad idea to have two id's in different cases since you won't be able to style them independently by id.

Answer 3

Well, you can test this pretty easily... But yes, they are case-sensitive.

Answer 4

Consider the following element:

<div id="Example"></div>

In modern browsers, most JavaScript methods used to obtain an Element object by id are case-sensitive:

document.getElementById('Example')         // <div id="Example">
document.getElementById('example')         // null
document.querySelector('#Example')         // <div id="Example">
document.querySelector('#example')         // null
document.querySelector('[id="Example"]')   // <div id="Example">
document.querySelector('[id="example"]')   // null

On the other hand, you can use the case-insensitive attribute selector to select an element by id regardless of capitalization:

document.querySelector('[id="Example" i]') // <div id="Example">
document.querySelector('[id="example" i]') // <div id="Example">

The method above will work for all HTML attributes values within the ASCII range.

Though not recommended, you can also use the case-insensitive search regular expression flag to obtain an element by id independently of the case. This method has the potential to be used for more than just case-insensitive pattern matching:

[...document.querySelectorAll('[id]')].find(e => /^Example$/i.test(e.id)) // <div id="Example">
[...document.querySelectorAll('[id]')].find(e => /^example$/i.test(e.id)) // <div id="Example">

In regards to CSS, the ID selector (#example) is case-insensitive, while the ID attribute selector ([id="example"]) is case-sensitive, unless you use the case-insensitive attribute selector ([id="example" i]):

#Example         { /* ... */ } /* Match */
#example         { /* ... */ } /* Match */
[id="Example"]   { /* ... */ } /* Match */
[id="example"]   { /* ... */ } /* No Match */
[id="Example" i] { /* ... */ } /* Match */
[id="example" i] { /* ... */ } /* Match */

Answer 5

It is valid on all modern browsers (IE 8+) but I do not recommended it because CSS is case-insensitive. It's better to stick to one case to avoid any possible confusion or errors with CSS.