Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 439
Justin Grant Avatar asked Apr 05 '10 18:04

Justin Grant


People also ask

Are jQuery selectors case-sensitive?

jQuery attribute value selectors are generally case-sensitive.

Are selectors case-sensitive?

Since its inception, CSS has been a weird language from the case perspective, it is case-insensitive by definition, but in reality it is more of a "hybrid": properties and values are case-insensitive, while selectors are (mostly) case-sensitive.

What are the selectors of jQuery?

jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors. All selectors in jQuery start with the dollar sign and parentheses: $().


1 Answers

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.

like image 176
Justin Grant Avatar answered Sep 19 '22 18:09

Justin Grant