Are CSS selectors case-sensitive?

Question

I was recently updating a CMS site and a tab-navigation plugin had inserted the following markup:

<li id="News_tab">...

I've always written my CSS selectors in lowercase so when I tried to style this with #news_tab, it wouldn't apply, but #News_tab worked.

After all these years I'm surprised that I haven't run into this before, so I've always been under the impression that CSS was case-insensitive. Has CSS always been case-sensitive and I just haven't noticed thanks to my consistent code style?

Solution 1

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

Solution 2

CSS4 (CSS Selector Level 4) adds support for case-insensitive match (ASCII only).

input[value='search' i]

It's the "i" at the end which would do the trick...

Check my other answer for details which browser supports this.

Solution 3

Class and ID attributes are case sensitive.

Solution 4

http://www.w3.org/TR/CSS2/syndata.html

All CSS 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 CSS

From the docs website.

---

Follow-up for selectors:

http://www.w3.org/TR/CSS2/selector.html

The case-sensitivity of document language element names in selectors depends on the document language. For example, in HTML, element names are case-insensitive, but in XML they are case-sensitive.

View more solutions