256

I keep reading everywhere that CSS is not case sensitive, but I have this selector

.holiday-type.Selfcatering

which when I use in my HTML, like this, gets picked up

<div class="holiday-type Selfcatering">

If I change the above selector like this

.holiday-type.SelfCatering

Then the style does not get picked up.

Someone is telling lies.

Gumbo
  • 643,351
  • 109
  • 780
  • 844
Sachin Kainth
  • 45,256
  • 81
  • 201
  • 304
  • 61
    The moral of this story is just be case sensitive all of the time -- don't bounce back and forth willy nilly. You'll find your code is easier to read and anyone picking up your leftovers will appreciate it. – kingdango Sep 25 '12 at 19:39
  • 3
    Im treating as case sensitive from now on. class="Price" not working, class="price" working, so in a practical every day sense they ARE case sensitive. – tinmac Apr 02 '14 at 08:01
  • 4
    See [a complete "Case matrix"](http://stackoverflow.com/a/26860699/287948), **about case sensitivity in the *values of properties* and *selectors***. – Peter Krauss Nov 12 '14 at 12:25
  • 6
    Funny thing, I was consistently using camelCase in my class name, but CSS didn't pick up on it on iOS webview. So the moral is, always-use-dashes-for-classes. – EpicPandaForce Mar 13 '15 at 12:42
  • @EpicPandaForce seriously? anyone knows if the behaviour changed? I am using camelCase in my app – wlf Jan 05 '21 at 23:09

4 Answers4

268

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

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

If the document type defined class names as case-insensitive, then you would have a match regardless.

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

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

chharvey
  • 8,580
  • 9
  • 56
  • 95
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 7
    Whoa this is exactly the opposite of what my [jsfiddle test](http://jsfiddle.net/HR24X/) indicates. There the `div` and `DIV` selectors both matched the `
    `, but the id and the class name selectors had to be exactly case sensitive. Unless I misunderstood your answer?
     – Roddy of the Frozen Peas Sep 21 '12 at 16:00
  • 23
    @Roddy of the Frozen Peas: That's because HTML classes and IDs are case sensitive, whereas tag names are not. I specifically left tag names out of my answer for this reason. (By the way, tag names are only case sensitive in true XHTML, regardless of the doctype - if jsFiddle could let you force the page to be served as application/xhtml+xml, the `DIV` selector would no longer match.) – BoltClock Sep 21 '12 at 16:01
  • 2
    @BoltClock What does "document language" mean here ? – Geek Sep 26 '12 at 05:56
  • 4
    @Geek: "document language" refers to the language of whatever you're applying CSS to, most commonly HTML, XHTML or XML. You can find the definition [here](http://www.w3.org/TR/CSS21/conform.html). – BoltClock Sep 26 '12 at 08:07
  • @BoltClock You said `However there is no such syntax for class or ID selectors (yet?)`, but since according to http://www.w3.org/TR/html401/struct/links.html#h-12.2.1, it is illegal to have two id's that only differ in case, I'm not sure of the value. The exception may be if the page was dynamically generated and the id was used as a possible precondition. Like an element that might vary the case of an id based on some condition that you wanted to style two different ways based on the exact case of the id. Seems a better approach should be used however. – Robert McKee Dec 10 '14 at 19:53
  • 5
    Is anyone else thoroughly confused? If the selectors are case **in**sensitive, then by definition, doesn't that make CSS classes (*in relation to the selectors selecting them*) case **in**sensitive, too? In other words, *in relation to each other* (CSS classes and selectors) - if one is case insensitive, then that means they both are. In yet other words - if my selector is `.selfcatering` and selectors are case insensitive, why should it care whether the class is `Selfcatering` or `SelfCatering` or `sElfcAtErInG`? What am I missing? – jbyrd Jun 29 '18 at 13:34
  • @jbyrd: That's a good question - one I've wondered about myself, but cannot answer. You'll have to ask the CSS Working Group why they decided that Selectors should be conservative and follow document language case sensitivity rules rather than be liberal and actually match case insensitively regardless of the document language. (On a side note, ["CSS class" is a misnomer](https://stackoverflow.com/questions/18701670/can-i-use-non-existing-css-classes/18701712#18701712), as it's HTML that defines how the class attribute works, not CSS, so the "by definition" description doesn't quite hold.) – BoltClock Jun 29 '18 at 13:53
68

Perhaps not a lie, but need for clarification.

The actual CSS itself is not case sensitive.

For example

wiDth:100%;

but the names must be case sensitive to be unique identifiers.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Nash Worth
  • 2,524
  • 1
  • 21
  • 28
25

In quirks mode all browsers behave like case-insensitive when using CSS class and id names.

In quirks mode CSS class and id names are case insensitive. In standards mode they are case sensitive. (This also applies to getElementsByClassName.) Read more.

Sometimes when you have wrong doctypes like bellow, your browser goes in quirks mode.

<!DOCTYPE html PUBLIC>
<!DOCTYPE html anytext>

you should use standard doctype

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

if your CSS class or id names behaves case insensitive please check your doctype.

Mohamad Shiralizadeh
  • 8,329
  • 6
  • 58
  • 93
9

CSS is case insensitive.

But in HTML5 the class and ID are case sensitive

So, CSS properties, values, pseudo class names, pseudo element names, element names are case insensitive

And CSS class, id , urls, font-families are case sensitive.

note : in html quirks mode the css is case insensitive even for ID and class (if you remove doctype declaration)

Example on CodePen : https://codepen.io/swapnilPakolu/pen/MWgvQyB?&editable=true#anon-signup 

<!DOCTYPE html>
<html>
<head>
<title>CSS case sensitive ?</title>
<style>

P#id
{color:RED;}

p#ID
{font-size:30PX;}

#iD
{BORDER:4px solid blue;}

.class
{text-decoration:underLine;}

.CLASS
{background-color:graY;}

.Class
{font-weight:900;}

#ID::afTeR
{conTent:"colored text";
disPlay:bLock;
color:#fAdAcA;}

.class:hoVeR
{background-color:lightblue;}

</style>
</head>
<body>
<p id="id" class="class">red and underline</p>
<p id="ID" class="CLASS">30px font size and gray background</p>
<p id="iD" class="Class">bold and blue border</p>
</body>
</html>
Swap
  • 319
  • 2
  • 6