Are Class Names in CSS Selectors Case Sensitive

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.¹

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.²

If the document type defined class names as case-insensitive, then you would have a match regardless.

---

¹ _{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.}

² _{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 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.}

Are CSS selectors case-sensitive?

CSS itself is case insensitive, but selectors from HTML (class and id) are case sensitive:

CSS recommendation on case sensitivity

HTML recommendation, id attribute (note the [CS])

How can I apply CSS selector to attribute values being case sensitive?

HTML5 actually contains an entire section dedicated to case-sensitivity for the purposes of selector matching. Here's what it says about attribute names and values:

Attribute and element names of HTML elements in HTML documents must be treated as ASCII case-insensitive for the purposes of selector matching.

Everything else (attribute values on HTML elements, IDs and classes in no-quirks mode and limited-quirks mode, and element names, attribute names, and attribute values in XML documents) must be treated as case-sensitive for the purposes of selector matching.

Of course, HTML 4 does not state anything about interop with selectors, but it does say that the title attribute in particular is case-sensitive. Since selectors depend on the document language for determining case-sensitivity, there is no difference here.

XHTML follows the same set of rules as XML does: all attribute values should be case-sensitive, so a selector must follow that case-sensitivity. Again, no difference.

So what you're seeing is entirely by design; there is no browser or spec issue.

Can I use camelCase in CSS class names

Technically yes, but it's risky because while CSS syntax is mostly case-insensitive, in some browsers under certain conditions, class names are treated as case-sensitive, as the spec does not specify how browsers should handle case when matching CSS rules to HTML class names.

From the spec, section 4.1.3:

All CSS syntax is case-insensitive within the ASCII range...

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

...the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification.

Rather than learn the browsers and conditions where case is sensitive, it's best that you just realize that the best approach is the most compatible: use the same case in all code for a given CSS class, and don't create two or more CSS class names that differ only in case.

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

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.

Which casing should I use for CSS classes when using CSS-in-JS?

In React first one always works in case of modules, so you do not need to worry about it. So, going with the below convention works fine.

React:

import style from './style.module.css'
//...
<Button className={style.myButton} />

CSS

.myButton {
    background-color: blue;
}

Refer to this Medium link for more insight:
CSS in JS

Are property values in CSS case-sensitive?

(updating @ÁlvaroG.Vicario answer and comments, and complementing this answer... This is a Wiki, please edit to enhance)

Example: for CSS3 (and HTML5) there are new explicit rules, as "font-face property must be case-insensitive".[2]

---

Context

W3C interoperating standards, mainly XML, HTML, CSV and CSS.

CSS general rules

CSS2 (a W3C standard of 2008) fixed basic conventions about "Characters and case", and CSS3 (a W3C standard for 2015) added something more.

1. By default "all CSS syntax is case-insensitive (...)" [1]

2. There are exceptions, "(...) except for parts that are not under the control of CSS"[1]

2.1. element names are case-sensitive in HTML5 (?) and XML, but case-insensitive in HTML4.

2.2. identifiers (including element names, classes, and IDs in selectors) are case-sensitive. HTML attributes id and class, of font names, and of URIs lies outside the scope of the CSS specification.

3. ....

4. The

Case matrix

Exceptions and specific (explicited in a reference) rules. "YES" indicate that value is case-sensitive.

Property values:

 CSS property      | Case-sens. | Reference and notes
 ------------------|------------|--------------------
 %colorVals        | NO         | [3]
 font-family       | NO         | [2]
 %url              | YES        | ...
 content           | YES        | ...
 ----------------------------------------------------
 %colorVals = color, background, etc.
 %url = background-image, etc. that use `url()`, see [7] and notes. 

Selector values:

 CSS selector      | Case-sens. | Reference and notes
 ------------------|------------|--------------------
 id                | YES        |...
 element           | YES/NO     | ... YES for XML...
 class name        | YES        | [5]
 (`~ i` operator)  | NO         | [6]
 ----------------------------------------------------
 YES/NO = depends on the document language (see ref. and notes).

REFERENCES:

[1] W3C/CSS2/syndata, sec. 4.1.3 Characters and case.

[2] W3C/CSS3-fonts, sec. 5.1 Case sensitivity of font family names

[3] W3C/CSS3-color, sec. 4.1. Basic color keywords

[4] W3C/CSS3-values, sec. 3.1. Pre-defined Keywords

[5] W3C/Selectors, sec. 3. Case sensitivity

[6] W3C/Selectors4, sec. 6.3. Case-sensitivity

[7] RFC 3986 and URL syntax illustration at Wikipedia.

---

Quotations and notes

• Typical URLs starts with domain, that is case insensitive, but after it (path, query or fragment syntatical components), is case sensitive. See [7].

• "User agents must match these names case insensitively". [2]

---

Related Topics