I keep reading everywhere that CSS is not case sensitive, but I have this selector
.holiday-type.Selfcatering
which when I use in my HTML, like this, gets picked up
<div class="holiday-type Selfcatering">
If I change the above selector like this
.holiday-type.SelfCatering
Then the style does not get picked up.
Someone is telling lies.
Best Answer
CSS selectors are generally case-insensitive; this includes class and ID selectors.
But HTML class names are case-sensitive (see the attribute definition), and that's causing a mismatch in your second example. This has not changed in HTML5.1
This is because the case-sensitivity of selectors is dependent on what the document language says:
So, given an HTML element with a
Selfcatering
class but without aSelfCatering
class, the selectors.Selfcatering
and[class~="Selfcatering"]
will match it, while the selectors.SelfCatering
and[class~="SelfCatering"]
would not.2If the document type defined class names as case-insensitive, then you would have a match regardless.
1 In quirks mode for all browsers, classes and IDs are case-insensitive. This means case-mismatching selectors will always match. This behavior is consistent across all browsers for legacy reasons, and is mentioned in this article.
2 For what it's worth, Selectors level 4 contains a proposed syntax for forcing a case-insensitive search on attribute values using
[class~="Selfcatering" i]
or[class~="SelfCatering" i]
. Both selectors will match an HTML or XHTML element with either aSelfcatering
class or aSelfCatering
class (or, of course, both). However there is no such syntax for class or ID selectors (yet?), presumably because they carry different semantics from regular attribute selectors (which have no semantics associated with them), or because it's difficult to come up with a usable syntax.