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?
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 (mostly) case-sensitive.
Yes, it is a case sensitive language, which means the identifiers, keywords, variables, and function names must be written with a consistent capitalization of letters.
Note: The id name is case sensitive! Note: The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.).
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])
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With