Are 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])

CSS selector case insensitive for attributes

It now exists in CSS4, see this answer.

Otherwise, for jQuery, you can use...

$(':input[name]').filter(function() {
   return this.value.toLowerCase() == 'search';
});

jsFiddle.

You could also make a custom selector...

$.expr[':'].valueCaseInsensitive = function(node, stackIndex, properties){
     return node.value.toLowerCase() == properties[3];
};

var searchInputs = $(':input:valueCaseInsensitive("Search")');

jsFiddle.

The custom selector is a bit of overkill if doing this once, but if you need to use it many times in your application, it may be a good idea.

Update

Is it possible to have that kind of custom selector for any attribute?

Sure, check out the following example. It's a little convoluted (syntax such as :input[value:toLowerCase="search"] may have been more intuitive), but it works :)

$.expr[':'].attrCaseInsensitive = function(node, stackIndex, properties){
    var args = properties[3].split(',').map(function(arg) {
        return arg.replace(/^\s*["']|["']\s*$/g, '');  
    });
    return $(node).attr(args[0]).toLowerCase() == args[1];
};

var searchInputs = $('input:attrCaseInsensitive(value, "search")');

jsFiddle.

You could probably use eval() to make that string an array, but I find doing it this way more comfortable (and you won't accidentally execute any code you place in your selector).

Instead, I am splitting the string on , delimiter, and then stripping whitespace, ' and " either side of each array member. Note that a , inside a quote won't be treated literally. There is no reason one should be required literally, but you could always code against this possibility. I'll leave that up to you. :)

I don't think map() has the best browser support, so you can explictly iterate over the args array or augment the Array object.

CSS attribute selector and case sensitivity with the type attribute vs. made-up attributes

This, and the broader use case of forcing attribute selectors to match case-sensitively, has been addressed by the introduction of a case-sensitive attribute selector flag s:

ol[type='i' s] {
  list-style-type:lower-roman;
}

ol[type='I' s] {
  list-style-type:upper-roman;
}

Now we await implementations...

---

The HTML spec seems to suggest that the behavior of the type attribute of ol is incorrect, but its use of certain keywords makes this less than 100% clear. Section 4.16.2 uses "must":

Attribute selectors on an HTML element in an HTML document must treat the values of attributes with the following names as ASCII case-insensitive, with one exception as noted in the rendering section:

• ...
• type (except as specified in the rendering section)

All other attribute values and everything else must be treated as entirely case-sensitive for the purposes of selector matching.

And points to section 14.3.8, which uses "expected" as described in the abstract of section 14 (tl;dr: a browser is not necessarily in violation of the spec if it chooses not to follow what is stated as "expected" behavior):

The following rules are also expected to apply, as presentational hints:

@namespace url(http://www.w3.org/1999/xhtml);

ol[type="1"], li[type="1"] { list-style-type: decimal; }
ol[type=a], li[type=a] { list-style-type: lower-alpha; }
ol[type=A], li[type=A] { list-style-type: upper-alpha; }
ol[type=i], li[type=i] { list-style-type: lower-roman; }
ol[type=I], li[type=I] { list-style-type: upper-roman; }
ul[type=none i], li[type=none i] { list-style-type: none; }
ul[type=disc i], li[type=disc i] { list-style-type: disc; }
ul[type=circle i], li[type=circle i] { list-style-type: circle; }
ul[type=square i], li[type=square i] { list-style-type: square; }

In the above style sheet, the attribute selectors for the ol and li elements are expected to be treated as case-sensitive.

Given that the expected behavior as described in the latter is more in line with author expectations than actual browser behavior, I'm going to say that this is indeed incorrect behavior despite the permissiveness of the word "expected".

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.

CSS or SASS selector that only uses uppercase letters

CSS selectors like tags, classes and IDs are generally not case-sensitive. See the spec:

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. For example, in HTML, element names
are case-insensitive, but in XML, they are case-sensitive.

Force css selectors to be case insensitive

CSS selectors are already case-insensitive.

What you have to watch out for are HTML class names, as they are case sensitive.

See this question for a more detailed explanation.

---

There are two ways I will tell you to fix this, but both are, in essence, just slapping a band-aid on it and calling it good.

1. Change each HTML class to include the new CSS selectors
2. Run the entire stylesheet and HTML rules through a toLowercase() method of some sort.

Both of these will fix your problem, but neither are a very good solution.

The moral of the story is to use one case and stick with it. There is no point in going back and forth.

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