Are class names in CSS selectors case sensitive?
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:
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.
So, given an HTML element with a Selfcatering class but without a SelfCatering class, the selectors .Selfcatering and [class~="Selfcatering"] will match it, while the selectors .SelfCatering and [class~="SelfCatering"] would not.2
If the document type defined class names as case-insensitive, then you would have a match regardless.
1In 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.
2For 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 a Selfcatering class or a SelfCatering 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.
Perhaps not a lie, but need for clarification.
The actual css itself is not case sensitive.
For example
wiDth:100%;
but the names, they must be case sensitive to be unique identifiers.
Hope that helps.