Search code examples
javascriptjqueryhtmlstandardsquirks-mode

JQuery class selectors like $(.someClass) are case sensitive?

Given this HTML:

<div class="OpenIDSelector">some text</div>

Why does this JQuery selector match it on some browsers and some pages, but not on others? 

$('.OpenIdSelector')

NOTE: I ran into this problem and solved it myself, but it was annoying and I didn't find it on StackOverflow already, so I'm posting it as a Q&A pair so someone else won't waste an hour like I did.

Solution

  • Turns out JQuery's class selector uses the new javascript method getElementsByClassName if the browser supports it. This method is case-insensitive on quirks-mode pages, and case-sensitive on non-quirksmode (aka standards-compliant) pages. Sure, it's usually obvious that the cases are different, but when the text is stuck in the middle of a long, complex selector it was hard to see. Apparently there are lots of case-sensitive differences between standards and quirks to watch out for.

    Moral of the story: match case of everything in your HTML (element names, CSS classes, etc.) because you never know when a change to a browser or standard or library might invalidate your assumption about case-insensitivity.