Saltar al contenido

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

Si te encuentras con algún detalle que te causa duda puedes comentarlo y haremos todo lo necesario de ayudarte rápidamente.

Solución:

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 están distingue entre mayúsculas y minúsculas (ver attribute definición), 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 distinción entre mayúsculas y minúsculas de los selectores depende de lo que diga el idioma del documento:

La sintaxis de todos los selectores no distingue entre mayúsculas y minúsculas dentro del rango ASCII (es decir, [a-z] y [A-Z] son equivalentes), a excepción de las partes que no están bajo el control de Selectores. La distinción entre mayúsculas y minúsculas de los nombres de los elementos del idioma del documento, attribute nombres, y attribute Los valores de los selectores dependen del idioma del documento.

Entonces, dado un elemento HTML con un Selfcatering clase pero sin SelfCatering clase, los selectores .Selfcatering y [class~="Selfcatering"] coincidirá con él, mientras que los selectores .SelfCatering y [class~="SelfCatering"] no lo haría2

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


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

2Por si sirve de algo, el nivel 4 de selectores contiene una sintaxis propuesta para forzar una búsqueda que no distingue entre mayúsculas y minúsculas en attribute valores usando [class~="Selfcatering" i] o [class~="SelfCatering" i]. Ambos selectores coincidirán con un elemento HTML o XHTML con un Selfcatering clase o un SelfCatering clase (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 de la normal. attribute selectores (que tienen no semántica asociada con ellos), o porque es difícil encontrar una sintaxis utilizable.

Tal vez no sea una mentira, sino una necesidad de aclaración.

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

Por ejemplo

wiDth:100%;

pero los nombres deben distinguir entre mayúsculas y minúsculas para ser identificadores únicos.

Espero que ayude.

En modo peculiar, todos los navegadores se comportan como no distingue entre mayúsculas y minúsculas al usar la clase CSS y los nombres de identificación.

En el modo de peculiaridades, los nombres de clase e identificación 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). Lea más.

A veces, cuando tiene tipos de documentos incorrectos como los siguientes, su navegador entra en modo peculiar.



deberías usar el tipo de documento estándar

HTML5

 

HTML 4.01 estricto

 

HTML 4.01 de transición

 

Conjunto de marcos HTML 4.01

 

XHTML 1.0 estricto

 

XHTML 1.0 Transicional

 

Conjunto de marcos XHTML 1.0

 

XHTML 1.1

 

si su clase CSS o nombres de identificación se comportan sin distinción entre mayúsculas y minúsculas, verifique su tipo de documento.

Reseñas y valoraciones del tutorial

Acuérdate de que tienes la opción de valorar este artículo .

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *