Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Are CSS selectors case-sensitive?

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?

like image 997
Andrew Vit Avatar asked Sep 26 '11 18:09

Andrew Vit


People also ask

Are selectors case-sensitive?

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.

Is HTML CSS Javascript 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.

Are HTML ID case-sensitive?

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


2 Answers

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

like image 180
Einacio Avatar answered Sep 22 '22 00:09

Einacio


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.

like image 35
Robert Siemer Avatar answered Sep 21 '22 00:09

Robert Siemer