258

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.

5
  • 62
    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, 2012 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 2, 2014 at 8:01
  • 4
    See a complete "Case matrix", about case sensitivity in the values of properties and selectors. Nov 12, 2014 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. Mar 13, 2015 at 12:42
  • @EpicPandaForce seriously? anyone knows if the behaviour changed? I am using camelCase in my app
    – wlf
    Jan 5, 2021 at 23:09

5 Answers 5

269

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.

7
  • 7
    Whoa this is exactly the opposite of what my jsfiddle test indicates. There the div and DIV selectors both matched the <div>, but the id and the class name selectors had to be exactly case sensitive. Unless I misunderstood your answer? Sep 21, 2012 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, 2012 at 16:01
  • 2
    @BoltClock What does "document language" mean here ?
    – Geek
    Sep 26, 2012 at 5: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.
    – BoltClock
    Sep 26, 2012 at 8:07
  • 5
    Is anyone else thoroughly confused? If the selectors are case insensitive, then by definition, doesn't that make CSS classes (in relation to the selectors selecting them) case insensitive, 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, 2018 at 13:34
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.

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

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>
0

Amin here I believe you can fix that problem by adding an "i" just before the end bracket. it means instead of :.holiday-type.SelfCatering you can try this: [class=".holiday-type.SelfCatering" i] and you get your style eventhough you used a capitalized C so,yes, class and id are case sensitive but you can ignore the sensitivity using an "i"

1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. Oct 5 at 10:01

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.