CODEWITHSUNDEEP
htmlcsscss-selectors
Sachin Kainth
Sachin Kainth

Reputation: 46750

Are class names in CSS selectors case sensitive?

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.

Upvotes: 262

Views: 90247

Answers (5)

user22657667
user22657667

Reputation: 1

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"

Upvotes: 0

Nash Worth
Nash Worth

Reputation: 2574

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.

Upvotes: 71

Mohamad Shiralizadeh
Mohamad Shiralizadeh

Reputation: 8765

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.

Upvotes: 28

Swap
Swap

Reputation: 349

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>

Upvotes: 10

BoltClock
BoltClock

Reputation: 723729

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.

Upvotes: 276

Related Questions