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

229

Je continue de 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, est ramassé

<div class="holiday-type Selfcatering">

Si je change le sélecteur ci-dessus comme ceci

.holiday-type.SelfCatering

Ensuite, le style n'est pas repris.

Quelqu'un dit des mensonges.

html css css-selectors Sachin Kainth
la source
55
La morale de cette histoire est d'être sensible à la casse tout le temps - ne rebondissez pas bon gré mal gré. Vous constaterez que votre code est plus facile à lire et quiconque ramassant vos restes l'appréciera.
kingdango
3
Je traite désormais comme sensible à la casse. class = "Price" ne fonctionne pas, class = "price" fonctionne, donc dans un sens pratique tous les jours, ils SONT sensibles à la casse.
Tino Mclaren
4
Voir une "matrice de casse" complète , sur la sensibilité à la casse dans les valeurs des propriétés et des sélecteurs .
Peter Krauss
5
Chose amusante, j'utilisais régulièrement camelCase dans le nom de ma classe, mais CSS ne l'a pas détecté sur la vue Web iOS. Donc, la morale est, toujours utiliser des tirets pour les classes.
EpicPandaForce

Réponses:

242

Les sélecteurs CSS sont généralement insensibles à la casse; cela inclut les sélecteurs de classe et d'ID.

Mais les noms de classe HTML sont sensibles à la casse (voir la définition de l'attribut), ce qui provoque une incompatibilité dans votre deuxième exemple. Cela n'a pas changé en HTML5 . 1

En effet, la sensibilité à la casse des sélecteurs dépend de ce que dit le langage du document :

Toute la syntaxe des sélecteurs est insensible à la casse dans la plage ASCII (c'est-à-dire que [az] et [AZ] sont équivalents), à l'exception des parties qui ne sont pas sous le contrôle des sélecteurs. La sensibilité à la casse des noms d'éléments de langage de document, des noms d'attribut et des valeurs d'attribut dans les sélecteurs dépend de la langue du document.

Donc, étant donné un élément HTML avec une Selfcateringclasse mais sans SelfCateringclasse, les sélecteurs .Selfcateringet [class~="Selfcatering"]correspondront, alors que les sélecteurs .SelfCateringet [class~="SelfCatering"]non. 2

Si le type de document définissait les noms de classe comme étant insensibles à la casse, vous auriez malgré tout une correspondance.

1 En mode excentrique pour tous les navigateurs, les classes et les ID ne respectent pas la casse. Cela signifie que les sélecteurs ne respectant pas la casse correspondront toujours. Ce comportement est cohérent dans tous les navigateurs pour des raisons héritées et est mentionné dans cet article .

2 Pour ce que ça vaut, le niveau 4 des sélecteurs contient une syntaxe proposée pour forcer une recherche insensible à la casse sur les valeurs d'attribut à l'aide de [class~="Selfcatering" i]ou [class~="SelfCatering" i]. Les deux sélecteurs associeront un élément HTML ou XHTML à une Selfcateringclasse ou à une SelfCateringclasse (ou, bien sûr, aux deux). Cependant, il n'existe pas encore de telle syntaxe pour les sélecteurs de classe ou d'ID, probablement parce qu'ils portent une sémantique différente des sélecteurs d'attributs normaux (auxquels aucune sémantique n'est associée), ou parce qu'il est difficile de trouver une syntaxe utilisable.

BoltClock
la source
7
Whoa c'est exactement le contraire de ce que mon test jsfiddle indique. Là , les divet DIVsélecteurs à la fois adaptés à la <div>, mais l'identifiant et les sélecteurs de nom de classe ont dû être exactement sensible à la casse. A moins que j'aie mal compris votre réponse?
Roddy des pois surgelés du
21
@Roddy of the Frozen Peas: En effet, les classes HTML et les ID sont sensibles à la casse, contrairement aux noms de balises. J'ai spécifiquement omis les noms de balises de ma réponse pour cette raison. (Soit dit en passant, les noms de balises ne sont sensibles à la casse qu'en vrai XHTML, quel que soit le doctype - si jsFiddle pouvait vous permettre de forcer la page à être servie en tant qu'application / xhtml + xml, le DIVsélecteur ne correspondrait plus.)
BoltClock
2
@BoltClock Que signifie "langue du document" ici?
Geek
4
@Geek: "langue du document" fait référence à la langue de tout ce à quoi vous appliquez CSS, le plus souvent HTML, XHTML ou XML. Vous pouvez trouver la définition ici .
BoltClock
2
Quelqu'un d'autre est-il complètement confus? Si les sélecteurs sont cas dans sensibles, par définition, ne pas rendre les classes CSS ( en relation avec les sélecteurs les sélectionnant ) cas dans trop sensible,? En d'autres termes, les uns par rapport aux autres (classes CSS et sélecteurs) - si l'un est insensible à la casse, cela signifie qu'ils le sont tous les deux. En d'autres termes - si mon sélecteur est .selfcateringet que les sélecteurs ne respectent pas la casse, pourquoi devrait-il se soucier de savoir si la classe est Selfcateringou SelfCateringou sElfcAtErInG? Qu'est-ce que je rate?
jbyrd
62

Peut-être pas un mensonge, mais un 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 identifiants uniques.

J'espère que cela pourra aider.

Jack Stone
la source
20

En mode excentrique, tous les navigateurs se comportent comme ne respectant pas la casse lors de l'utilisation des noms de classe et d'ID CSS.

En mode excentrique, les noms de classe et d'ID CSS ne respectent pas la casse. En mode standard, ils sont sensibles à la casse. (Cela s'applique également à getElementsByClassName.) En savoir plus.

Parfois, lorsque vous avez de mauvais doctypes comme ci-dessous, votre navigateur passe en mode bizarreries.

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

vous devez utiliser un doctype standard

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 Transitionnel

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

Jeu de cadres 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">

Transitionnel XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Jeu de cadres 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">

si votre classe CSS ou vos noms d'identifiants ne respectent pas la casse, veuillez vérifier votre doctype.

Mohamad Shiralizadeh
la source
3

CSS n'est pas sensible à la casse.

Mais en HTML5, la classe et l'ID sont sensibles à la casse

Ainsi, les propriétés CSS, les valeurs, les noms de pseudo-classe, les noms de pseudo-élément, les noms d'élément ne respectent pas la casse

Et les classes CSS, id, urls, font-families sont sensibles à la casse.

note: en mode excentrique html, le CSS est insensible à la casse même pour l'ID et la classe (si vous supprimez la déclaration doctype)

Exemple sur 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>
Échanger
la source