Os nomes de classe nos seletores CSS diferenciam maiúsculas de minúsculas?

229

Continuo lendo em todos os lugares que o CSS não diferencia maiúsculas de minúsculas, mas tenho esse seletor

.holiday-type.Selfcatering

que quando eu uso no meu HTML, assim, é captado

<div class="holiday-type Selfcatering">

Se eu mudar o seletor acima como este

.holiday-type.SelfCatering

Então o estilo não é escolhido.

Alguém está mentindo.

html css css-selectors Sachin Kainth
fonte
55
A moral dessa história é sempre sensível a maiúsculas e minúsculas o tempo todo. Você verá que seu código é mais fácil de ler e qualquer pessoa que pegar suas sobras apreciará.
kingdango 25/09/12
3
Estou tratando como sensível a maiúsculas a partir de agora. class = "Price" não está funcionando, class = "price" está funcionando, portanto, no sentido prático diário, eles diferenciam maiúsculas de minúsculas.
Tino Mclaren
4
Consulte uma "Matriz de caso" completa , sobre a distinção entre maiúsculas e minúsculas nos valores de propriedades e seletores .
Peter Krauss
5
O engraçado é que eu estava sempre usando o camelCase no nome da minha classe, mas o CSS não percebeu isso na visualização na web do iOS. Portanto, a moral é sempre use traços para as classes.
EpicPandaForce 13/03/2015

Respostas:

242

Os seletores de CSS geralmente não diferenciam maiúsculas de minúsculas; isso inclui seletores de classe e ID.

Mas os nomes de classe HTML são case-sensitive (veja a definição de atributo), e que está causando um descompasso em sua segunda exemplo. Isso não mudou no HTML5 . 1

Isso ocorre porque a distinção entre maiúsculas e minúsculas dos seletores depende do que o idioma do documento diz :

A sintaxe de todos os seletores não diferencia maiúsculas de minúsculas dentro do intervalo ASCII (ou seja, [az] e [AZ] são equivalentes), exceto para peças que não estão sob o controle dos seletores. A distinção entre maiúsculas e minúsculas dos nomes dos elementos do idioma do documento, nomes dos atributos e valores dos atributos nos seletores depende do idioma do documento.

Portanto, dado um elemento HTML com uma Selfcateringclasse, mas sem uma SelfCateringclasse, os seletores .Selfcateringe [class~="Selfcatering"]corresponderão a ele, enquanto os seletores .SelfCateringe [class~="SelfCatering"]não. 2

Se o tipo de documento definisse os nomes de classe como sem distinção entre maiúsculas e minúsculas, você teria uma correspondência independentemente.

1 No modo quirks para todos os navegadores, classes e IDs não diferenciam maiúsculas de minúsculas. Isso significa que os seletores de correspondência de caso sempre corresponderão. Esse comportamento é consistente em todos os navegadores por motivos herdados e é mencionado neste artigo .

2 Pelo que vale a pena, os seletores de nível 4 contêm uma sintaxe proposta para forçar uma pesquisa sem distinção entre maiúsculas e minúsculas nos valores de atributo usando [class~="Selfcatering" i]ou [class~="SelfCatering" i]. Ambos os seletores corresponderão a um elemento HTML ou XHTML com uma Selfcateringclasse ou uma SelfCateringclasse (ou, é claro, ambos). No entanto, não existe essa sintaxe para seletores de classe ou ID (ainda?), Presumivelmente porque eles carregam semânticas diferentes dos seletores de atributos regulares (que não possuem semântica associada a eles) ou porque é difícil criar uma sintaxe utilizável.

BoltClock
fonte
7
Uau, isso é exatamente o oposto do que meu teste jsfiddle indica. Lá, os seletores dive DIVcoincidiam com o <div>, mas os seletores de identificação e nome da classe precisavam fazer distinção entre maiúsculas e minúsculas. A menos que eu entenda mal a sua resposta?
Roddy das ervilhas congeladas
21
@Roddy of the Frozen Peas: Isso porque as classes e IDs HTML diferenciam maiúsculas de minúsculas, enquanto os nomes de tags não. Deixei especificamente nomes de tags fora da minha resposta por esse motivo. (A propósito, os nomes de tags diferenciam maiúsculas de minúsculas em XHTML verdadeiro, independentemente do tipo de documento - se jsFiddle permitir que você force a página a ser veiculada como application / xhtml + xml, o DIVseletor não corresponderá mais.)
BoltClock
2
@BoltClock O que significa "linguagem de documentos" aqui?
26712 Geek
4
@ Geek: "linguagem de documentos" refere-se à linguagem do que você está aplicando CSS, geralmente HTML, XHTML ou XML. Você pode encontrar a definição aqui .
BoltClock
2
Alguém mais está completamente confuso? Se os seletores são case no sensível, então, por definição, não faz que as classes make CSS ( em relação aos seletores de selecioná-los ) caso em sensível, também? Em outras palavras, em relação um ao outro (classes e seletores CSS) - se um não faz distinção entre maiúsculas e minúsculas, significa que ambos são. Em outras palavras - se meu seletor é .selfcateringe não faz distinção entre maiúsculas e minúsculas, por que deveria se importar se a classe é Selfcateringou SelfCateringou não sElfcAtErInG? o que estou perdendo?
Jbyrd
62

Talvez não seja mentira, mas precisa de esclarecimentos.

O CSS real em si não diferencia maiúsculas de minúsculas.

Por exemplo

wiDth:100%;

mas os nomes devem ser sensíveis a maiúsculas e minúsculas para serem identificadores exclusivos.

Espero que ajude.

Jack Stone
fonte
20

No modo peculiar, todos os navegadores se comportam como não diferenciam maiúsculas de minúsculas ao usar nomes de classe e ID de CSS.

No modo quirks, os nomes de classe e ID CSS não diferenciam maiúsculas de minúsculas. No modo de padrões, eles diferenciam maiúsculas de minúsculas. (Isso também se aplica a getElementsByClassName.) Leia mais.

Às vezes, quando você tem documentos errados, como o abaixo, seu navegador entra no modo peculiar.

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

você deve usar o doctype padrão

HTML 5

<!DOCTYPE html>

Estrito HTML 4.01

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

Transição HTML 4.01

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

Conjunto de quadros HTML 4.01

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

Conjunto de quadros XHTML 1.0

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

se a sua classe CSS ou o nome do ID se comportar sem distinção entre maiúsculas e minúsculas, verifique seu doctype.

Mohamad Shiralizadeh
fonte
3

CSS não diferencia maiúsculas de minúsculas.

Mas no HTML5 a classe e o ID diferenciam maiúsculas de minúsculas

Portanto, propriedades, valores CSS, nomes de pseudo classes, nomes de pseudo elementos, nomes de elementos não diferenciam maiúsculas de minúsculas

E a classe CSS, id, urls, famílias de fontes diferenciam maiúsculas de minúsculas.

note: no modo html quirks, o css não diferencia maiúsculas de minúsculas, mesmo para ID e classe (se você remover a declaração doctype)

Exemplo no 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>
Troca
fonte