Les noms de classe dans les sélecteurs CSS sont-ils sensibles à la casse?

Question

Je continue à lire partout que CSS n'est pas sensible à la casse, mais j'ai ce sélecteur

 .holiday-type.Selfcatering
 

qui quand j'utilise dans mon HTML, comme ça, se fait ramasser

 <div class="holiday-type Selfcatering">
 

Si je change le sélecteur ci-dessus comme ça

 .holiday-type.SelfCatering
 

Ensuite, le style ne sera pas pris en compte.

Quelqu'un dit des mensonges.

Answer 1

Les sélecteurs CSS sont généralement pas sensibles à la casse; il comprend des cours en classe et les sélecteurs d'ID.

Mais HTML noms de classe sont sensibles à la casse (voir la définition d'attribut), et qui est à l'origine d'un déséquilibre dans votre deuxième exemple. Cela n'a pas changé en HTML5.¹

C'est parce que le cas de la sensibilité de sélecteurs dépend de ce que le document dit la langue:

Tous les Sélecteurs syntaxe est insensible à la casse à l'intérieur de la plage ASCII (c'est à dire [a-z] et [A-Z] sont équivalents), sauf pour les pièces qui ne sont pas sous le contrôle de Sélecteurs. Le cas de la sensibilité de la langue du document les noms d'élément, les noms des attributs et des valeurs d'attribut dans les sélecteurs dépend de la langue du document.

Ainsi, pour un élément HTML avec un Selfcatering classe mais sans SelfCatering classe, les sélecteurs .Selfcatering et [class~="Selfcatering"] correspondent à elle, tandis que les sélecteurs .SelfCatering et [class~="SelfCatering"] ne le serait pas.²

Si le type de document défini les noms de classe comme insensible à la casse, alors que vous auriez un match, peu importe.

---

¹_{En mode quirks, pour tous les navigateurs, les classes et les Id sont insensibles à la casse. Cela signifie cas de désadaptation sélecteurs sera toujours à la hauteur. Ce comportement est compatible sur tous les navigateurs pour des raisons d'héritage, et est mentionné dans ce MDN page.}

²_{Pour ce que ça vaut, les Sélecteurs de niveau 4 contient une proposition de syntaxe pour forcer la casse de la recherche sur les valeurs d'attribut à l'aide de [class~="Selfcatering" i] ou [class~="SelfCatering" i]. Les deux sélecteurs va correspondre à un code HTML ou XHTML élément avec un Selfcatering une classe ou à un SelfCatering de la classe (ou, bien sûr, les deux). Cependant il n'existe pas de syntaxe pour la classe ou sélecteurs d'ID (encore?), sans doute parce qu'ils portent des différents sémantique ordinaire du sélecteur d'attribut (qui n'ont pas de sémantique associée avec eux), ou parce qu'il est difficile de trouver un produit de syntaxe.}

Answer 2

Peut-être pas un mensonge, mais besoin de clarification.

Le css lui-même n'est pas sensible à la casse.

Par exemple

 wiDth:100%;
 

mais les noms, ils doivent être sensibles à la casse pour être des identificateurs uniques.

J'espère que cela pourra aider.