Coder Perfect

Is the case of class names in CSS selectors important?


I keep reading that CSS doesn’t care about case, but I have this selector.


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

<div class="holiday-type Selfcatering">

If I update the selector above to look like this,


The style isn’t picked up after that.

Someone is lying to you.

Asked by Sachin Kainth

Solution #1

CSS selectors, including class and ID selectors, are often case-insensitive.

However, HTML class names are case-sensitive (see the attribute definition), thus your second example is incorrect. HTML5.1 hasn’t changed this.

This is due to the fact that selector case sensitivity is determined by the document language:

The selectors.Selfcatering and [class=”Selfcatering”] will match an HTML element with a Selfcatering class but no SelfCatering class, while the selectors.Selfcatering and [class=”Selfcatering”] will match an HTML element with a Selfcatering class but no SelfCatering class. [class=”SelfCatering”] and SelfCatering would not. 2

If the document type specifies that class names are case-insensitive, you’ll get a match regardless of case.

1 Classes and IDs are case-insensitive in quirks mode for all browsers. As a result, selectors with case mismatches will always match. For historical reasons, this behavior is constant across all browsers and is mentioned in this article.

2 For what it’s worth, Selectors level 4 proposes using [class=”Selfcatering” I or [class=”SelfCatering” I to force a case-insensitive search on attribute values. Both selectors will find an HTML or XHTML element with the Selfcatering or SelfCatering classes (or, of course, both). However, there is no such syntax for class or ID selectors (yet? ), possibly because they have different semantics than standard attribute selectors (which have no semantics), or because coming up with a viable syntax is difficult.

Answered by BoltClock

Solution #2

Maybe not a lie, but there is a need for explanation.

The CSS code itself is case insensitive.

For example


However, in order to be unique identifiers, names must be case sensitive.

Hope that helps.

Answered by Nash Worth

Solution #3

When using CSS class and id names in quirks mode, all browsers react as if they are case-insensitive.

When you have incorrect doctypes, such as the ones listed below, your browser may enter quirks mode.

<!DOCTYPE html anytext>

Standard doctype should be used.


<!DOCTYPE html> 

HTML 4.01 Strict


HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> 

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" ""> 

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> 

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" ""> 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" ""> 

Check your doctype if your CSS class or id names are case insensitive.

Answered by Mohamad Shiralizadeh

Solution #4

CSS does not care about case.

However, the class and ID in HTML5 are case sensitive.

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

CSS class, id, urls, and font-families are case sensitive as well.

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

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



{BORDER:4px solid blue;}




{conTent:"colored text";


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

Answered by Swap

Post is based on