Problem
I keep reading that CSS doesn’t care about case, but I have this selector.
.holiday-type.Selfcatering
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,
.holiday-type.SelfCatering
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
wiDth:100%;
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 PUBLIC>
<!DOCTYPE html anytext>
Standard doctype should be used.
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">
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>
<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>
Answered by Swap
Post is based on https://stackoverflow.com/questions/12533926/are-class-names-in-css-selectors-case-sensitive