Case-Insensitive Selectors in CSS

There are two types of computer languages in the world: the case-sensitive ones and the case-insensitive ones.

...and then, there’s CSS.

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 case-sensitive (mostly).

Let's see an example. Taking into account the following HTML code:

<div id=”green”>This is green.</div>
<div id=”Green”>This is Green.</div>
<div id=”gReEn”>tHiS iS gReEn.</div>

And adding some CSS:

#green { color: green; }
#Green { cOlOr: Green; }
#greEn { color: green; }

Let’s see how these CSS rules apply to the HTML one by one:

• The first CSS rule (#green) matches the first div, which will be displayed in a green color.
• The second rule (#Green) matches the second div, and, even when the property is written in a weird case, it will be displayed in a green color, too. (Remember, properties and values are case-insensitive).
• The third rule (#greEn) doesn’t apply to any of the divs as the id doesn’t match the case of the id of any of the elements.

That is because CSS respects the case-sensitivity of the document language for element names, as well as attribute names and values, and as HTML is case-sensitive for most attributes, the selectors are processed in a case-sensitive way...

...All of which may lead to confusing situations in which a selector is partially case-sensitive. This is when we are using attribute selectors. The name of the attribute will be case-insensitive, while the value of the attribute will still be case-sensitive.

[data-type=”car”] { color: red; }
[data-Type=”car”] { color: blue; }

Those two rules will apply to an element with an attribute data-type.

---

So, now that we have established the situations in which CSS is case-sensitive and case-insensitive, let’s see how this changes a little bit with the introduction of CSS Selectors Level 4, and in particular, with the case sensitivity options for attribute selectors.

The idea is quite simple, really: just add an i at the end of the value, right before the closing bracket (]). You can even use an uppercase I if you want.

That will indicate to the browser that the value of the attribute must be considered in a case-insensitive way. So something like this:

[data-name="John" i]

Will match all the elements with a data-attribute name spelled John in different cases: "john", "John", "jOhN", "JOHN", etc.

Note: if instead of an i you use an s, then the string will be matched taking into consideration the case. This could be useful in the few HTML attributes that are actually case-insensitive (such as "type" in a list).

Going back to the previous example with this HTML code:

<div id=”green”>This is green.</div>
<div id=”Green”>This is Green.</div>
<div id=”gReEn”>tHiS iS gReEn.</div>

Now, with the help of attribute selectors and the case (in)sensitivity option, we could create a single CSS rule to match all of the elements:

[id="green"i] { color: teal; }

Notice: the attribute selector has lower specificity than the ID selector, so it will have less priority. For example, if we combined the CSS rules from the first example with this last one, the first two divs will be green and only the last one will be a teal color, even when all of the elements are matched by the rule.

At first glance, the case-insensitivity option seems designed for edge cases (no pun intended) more than for a day-to-day styling thing. It could be interesting for some situations in which we don't know the case of the attribute, but those situations should be rare. Plus, these pattern/case matching rules are slower by definition, so it would be better to use them sparingly.

Still, this case-insensitivity option is a nice trick to have in your CSS toolbox.

---

This post was originally posted on Alvaro Montoro's personal blog.