¿Los nombres de clases en los selectores CSS distinguen entre mayúsculas y minúsculas?
Sigo leyendo en todas partes que CSS no distingue entre mayúsculas y minúsculas, pero tengo este selector
.holiday-type.Selfcatering
que cuando uso en mi HTML, como este, se recoge
<div class="holiday-type Selfcatering">
Si cambio el selector anterior de esta manera
.holiday-type.SelfCatering
Entonces el estilo no se retoma.
Alguien está diciendo mentiras.
Los selectores CSS generalmente no distinguen entre mayúsculas y minúsculas; esto incluye selectores de clase e ID.
Pero los nombres de las clases HTML distinguen entre mayúsculas y minúsculas (consulte la definición del atributo) y eso provoca una falta de coincidencia en el segundo ejemplo. Esto no ha cambiado en HTML5 . 1
Esto se debe a que la distinción entre mayúsculas y minúsculas de los selectores depende de lo que dice el lenguaje del documento :
Toda la sintaxis de los Selectores no distingue entre mayúsculas y minúsculas dentro del rango ASCII (es decir, [az] y [AZ] son equivalentes), excepto las partes que no están bajo el control de los Selectores. La distinción entre mayúsculas y minúsculas de los nombres de elementos del idioma del documento, los nombres de atributos y los valores de atributos en los selectores depende del idioma del documento.
Entonces, dado un elemento HTML con una Selfcateringclase pero sin SelfCateringclase, los selectores .Selfcateringy [class~="Selfcatering"]coincidirán con él, mientras que los selectores .SelfCateringy [class~="SelfCatering"]no lo harán. 2
Si el tipo de documento definiera los nombres de clases sin distinguir entre mayúsculas y minúsculas, entonces tendría una coincidencia de todos modos.
1 En el modo Quirks para todos los navegadores, las clases y los ID no distinguen entre mayúsculas y minúsculas. Esto significa que los selectores que no coinciden entre mayúsculas y minúsculas siempre coincidirán. Este comportamiento es constante en todos los navegadores por motivos heredados y se menciona en este artículo .
2 Por si sirve de algo, el nivel 4 de Selectores contiene una sintaxis propuesta para forzar una búsqueda que no distinga entre mayúsculas y minúsculas en valores de atributos usando [class~="Selfcatering" i]o [class~="SelfCatering" i]. Ambos selectores harán coincidir un elemento HTML o XHTML con una Selfcateringclase o una SelfCateringclase (o, por supuesto, ambas). Sin embargo, no existe tal sintaxis para los selectores de clase o ID (¿todavía?), presumiblemente porque tienen una semántica diferente a la de los selectores de atributos regulares (que no tienen semántica asociada), o porque es difícil encontrar una sintaxis utilizable.
Quizás no sea mentira, pero es necesario una aclaración.
El CSS real en sí no distingue entre mayúsculas y minúsculas.
Por ejemplo
wiDth:100%;
pero los nombres deben distinguir entre mayúsculas y minúsculas para que sean identificadores únicos.
En el modo peculiar, todos los navegadores se comportan sin distinguir entre mayúsculas y minúsculas cuando utilizan clases CSS y nombres de identificación.
En el modo peculiar, los nombres de identificación y clase CSS no distinguen entre mayúsculas y minúsculas. En el modo estándar distinguen entre mayúsculas y minúsculas. (Esto también se aplica a getElementsByClassName). Leer más.
A veces, cuando tienes tipos de documentos incorrectos como los siguientes, tu navegador entra en modo peculiar.
<!DOCTYPE html PUBLIC>
<!DOCTYPE html anytext>
deberías usar el tipo de documento estándar
HTML5
<!DOCTYPE html>
HTML 4.01 estricto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 transicional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Conjunto de marcos HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 estricto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transicional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Conjunto de marcos XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Si su clase CSS o nombres de identificación no distinguen entre mayúsculas y minúsculas, verifique su tipo de documento.
CSS no distingue entre mayúsculas y minúsculas.
Pero en HTML5 la clase y el ID distinguen entre mayúsculas y minúsculas.
Por lo tanto, las propiedades CSS, los valores, los nombres de pseudoclases, los nombres de pseudoelementos y los nombres de elementos no distinguen entre mayúsculas y minúsculas.
Y la clase CSS, id, URL y familias de fuentes distinguen entre mayúsculas y minúsculas.
nota: en el modo html peculiares, CSS no distingue entre mayúsculas y minúsculas incluso para ID y clase (si elimina la declaración de tipo de documento)
Ejemplo en 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>
