¿Los nombres de clase en los selectores CSS distinguen entre mayúsculas y minúsculas?

229

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 así

.holiday-type.SelfCatering

Entonces el estilo no se recoge.

Alguien está diciendo mentiras.

html css css-selectors Sachin Kainth
fuente
55
La moraleja de esta historia es ser sensible a mayúsculas y minúsculas todo el tiempo: no rebote de un lado a otro de ninguna manera. Encontrará que su código es más fácil de leer y cualquiera que recoja sus restos lo apreciará.
kingdango
3
Estoy tratando como mayúsculas y minúsculas de ahora en adelante. class = "Price" no funciona, class = "price" funciona, por lo que, en la práctica, todos los días SÍ distinguen entre mayúsculas y minúsculas.
Tino Mclaren
44
Vea una "Matriz de casos" completa , sobre mayúsculas y minúsculas en los valores de propiedades y selectores .
Peter Krauss
55
Lo curioso, estaba usando constantemente camelCase en mi nombre de clase, pero CSS no lo detectó en la vista web de iOS. Entonces, la moraleja es siempre usar guiones para las clases.
EpicPandaForce

Respuestas:

242

Los selectores de CSS generalmente no distinguen entre mayúsculas y minúsculas; Esto incluye selectores de clase e ID.

Pero los nombres de clase HTML distinguen entre mayúsculas y minúsculas (consulte la definición del atributo), y eso está causando una falta de coincidencia en su segundo ejemplo. Esto no ha cambiado en HTML5 . 1

Esto se debe a que la diferencia entre mayúsculas y minúsculas de los selectores depende de lo que dice el lenguaje del documento :

La sintaxis de todos 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 los atributos y los valores de los atributos en los selectores depende del idioma del documento.

Por lo tanto, dado un elemento HTML con una Selfcateringclase pero sin una SelfCateringclase, los selectores .Selfcateringy [class~="Selfcatering"]lo coincidirán, mientras que los selectores .SelfCateringy [class~="SelfCatering"]no lo harían. 2

Si el tipo de documento definía los nombres de clase como mayúsculas y minúsculas, entonces tendría una coincidencia independientemente.

1 En el modo peculiar 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 coherente en todos los navegadores por motivos heredados, y se menciona en este artículo .

2 Para lo que vale, el nivel 4 de Selectores contiene una sintaxis propuesta para forzar una búsqueda que no distingue entre mayúsculas y minúsculas en los valores de atributo 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 llevan una semántica diferente de los selectores de atributos regulares (que no tienen semántica asociada a ellos) o porque es difícil encontrar una sintaxis utilizable.

BoltClock
fuente
77
Vaya, esto es exactamente lo contrario de lo que indica mi prueba jsfiddle . Allí, los selectores divy DIVcoincidían con los <div>, pero el id y los selectores de nombre de clase tenían que ser exactamente sensibles a mayúsculas y minúsculas. ¿A menos que haya entendido mal su respuesta?
Roddy of the Frozen Peas
21
@Roddy of the Frozen Peas: Eso se debe a que las clases e ID de HTML distinguen entre mayúsculas y minúsculas, mientras que los nombres de etiquetas no lo son. Específicamente, dejé nombres de etiquetas fuera de mi respuesta por este motivo. (Por cierto, los nombres de etiquetas solo distinguen entre mayúsculas y minúsculas en XHTML verdadero, independientemente del tipo de documento; si jsFiddle podría permitirle que la página se sirva como application / xhtml + xml, el DIVselector ya no coincidiría).
BoltClock
2
@BoltClock ¿Qué significa "lenguaje de documentos" aquí?
Geek
44
@ Geek: "lenguaje de documento" se refiere al lenguaje de lo que sea que esté aplicando CSS, más comúnmente HTML, XHTML o XML. Puedes encontrar la definición aquí .
BoltClock
2
¿Alguien más está completamente confundido? Si los selectores son sensibles a mayúsculas y minúsculas, entonces, por definición, ¿eso no hace que las clases CSS ( en relación con los selectores que las seleccionan ) también sean sensibles a mayúsculas y minúsculas? En otras palabras, en relación entre sí (clases y selectores CSS): si uno no distingue entre mayúsculas y minúsculas, eso significa que ambos lo son. Todavía en otras palabras - si mi selector es .selfcateringy selectores son sensibles a mayúsculas, ¿por qué debería importa si la clase es Selfcateringo SelfCateringo sElfcAtErInG? ¿Qué me estoy perdiendo?
jbyrd
62

Quizás no sea una mentira, pero necesita aclaración.

El css real en sí no distingue entre mayúsculas y minúsculas.

Por ejemplo

wiDth:100%;

pero los nombres deben ser sensibles a mayúsculas y minúsculas para ser identificadores únicos.

Espero que ayude.

Jack Stone
fuente
20

En el modo peculiar, todos los navegadores se comportan sin distinción entre mayúsculas y minúsculas cuando usan clases de CSS y nombres de identificación.

En modo peculiar, la clase CSS y los nombres de identificación no distinguen entre mayúsculas y minúsculas. En modo estándar son sensibles a mayúsculas y minúsculas. (Esto también se aplica a getElementsByClassName). Leer más.

A veces, cuando tiene doctypes incorrectos como abajo, su navegador entra en modo caprichos.

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

deberías usar doctype estándar

HTML 5

<!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 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 marcos 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 su clase de CSS o nombres de identificación no distinguen entre mayúsculas y minúsculas, verifique su doctype.

Mohamad Shiralizadeh
fuente
3

CSS no distingue entre mayúsculas y minúsculas.

Pero en HTML5, la clase y la ID distinguen entre mayúsculas y minúsculas

Entonces, las propiedades CSS, los valores, los nombres de pseudo clases, los nombres de pseudo elementos, los nombres de elementos no distinguen entre mayúsculas y minúsculas

Y la clase CSS, id, URL, familias de fuentes distinguen entre mayúsculas y minúsculas.

nota: en el modo html quirks, css no distingue entre mayúsculas y minúsculas, incluso para ID y clase (si elimina la declaración doctype)

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>
Intercambiar
fuente