¿Qué caracteres son válidos en los nombres/selectores de clases CSS?
¿ Qué caracteres/símbolos están permitidos dentro de los selectores de clases CSS ?
Sé que los siguientes caracteres no son válidos , pero ¿qué caracteres son válidos ?
~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #
Puedes comprobarlo directamente en la gramática CSS .
Básicamente 1 , un nombre debe comenzar con un guión bajo ( _), un guión ( -) o una letra ( a– z), seguido de cualquier número de guiones bajos, guiones bajos, letras o números. Hay un problema: si el primer carácter es un guión, el segundo carácter debe ser una letra o un guión bajo, y el nombre debe tener al menos 2 caracteres.
-?[_a-zA-Z]+[_a-zA-Z0-9-]*
En definitiva, la regla anterior se traduce en lo siguiente, extraída de la especificación W3C :
En CSS, los identificadores (incluidos los nombres de elementos, las clases y los ID en los selectores) pueden contener solo los caracteres [a-z0-9] y los caracteres ISO 10646 U+00A0 y superiores, además del guión (-) y el guión bajo (_). ; no pueden comenzar con un dígito ni con un guión seguido de un dígito. Los identificadores también pueden contener caracteres de escape y cualquier carácter ISO 10646 como código numérico (consulte el siguiente elemento). Por ejemplo, el identificador "B&N?" puede escribirse como "B&N?" o "B\26 W\3F".
Los identificadores que comienzan con un guión o un guión bajo normalmente se reservan para extensiones específicas del navegador, como en -moz-opacity.
1 Todo se complica un poco más con la inclusión de caracteres Unicode escapados (que nadie usa realmente).
2 Tenga en cuenta que, según la gramática que vinculé, una regla que comienza con dos guiones, por ejemplo, --indent1no es válida. Sin embargo, estoy bastante seguro de haber visto esto en la práctica.
Para mi sorpresa, la mayoría de las respuestas aquí son incorrectas. Resulta que:
Se permite cualquier carácter excepto NUL en los nombres de clases CSS en CSS. (Si CSS contiene NUL (escapado o no), el resultado no está definido. [ caracteres CSS ]) Sin embargo, en HTML , tampoco se permiten puntos de código no asignados permanentemente. HTML tampoco tiene una forma de incluir caracteres de espacio (espacio, tabulación, avance de línea, avance de formulario y retorno de carro) en un atributo de nombre de clase , porque esas son listas de clases y aquí se usan espacios para separar los nombres de clases entre sí.
La respuesta de Mathias Bynens enlaza con explicaciones y demostraciones que muestran cómo usar estos nombres. Escrito en código CSS, es posible que sea necesario escapar el nombre de una clase , pero eso no cambia el nombre de la clase. Por ejemplo, una representación con un escape innecesario se verá diferente de otras representaciones de ese nombre, pero aún se refiere al mismo nombre de clase.
La mayoría de los demás lenguajes (de programación) no tienen ese concepto de escape de nombres de variables (“identificadores”), por lo que todas las representaciones de una variable deben verse iguales. Este no es el caso en CSS.
Entonces, si necesita convertir una cadena aleatoria en un nombre de clase CSS: ocúpese de NUL y el espacio, y escape (en consecuencia, para CSS o HTML). Hecho.
Respondí tu pregunta en profundidad en Secuencias de escape de caracteres CSS . El artículo también explica cómo escapar de cualquier carácter en CSS (y JavaScript), y también creé una herramienta útil para esto. De esa página:
Si le dieras a un elemento un valor de ID de
~!@$%^&*()_+-=,./';:"?><[]{}|`#, el selector se vería así:CSS:
<style> #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\# { background: hotpink; } </style>JavaScript:
<script> // document.getElementById or similar document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#'); // document.querySelector or similar $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#'); </script>
Lea las especificaciones del W3C . (esto es CSS 2.1; busque la versión adecuada para su supuesto de navegadores)
párrafo relevante:
En CSS, los identificadores (incluidos los nombres de elementos, las clases y los ID en los selectores) pueden contener solo los caracteres [a-z0-9] y los caracteres ISO 10646 U+00A1 y superiores, además del guión (-) y el guión bajo (_). ; no pueden comenzar con un dígito ni con un guión seguido de un dígito. Los identificadores también pueden contener caracteres de escape y cualquier carácter ISO 10646 como código numérico (consulte el siguiente elemento). Por ejemplo, el identificador "B&N?" puede escribirse como "B&N?" o "B\26 W\3F".
Como @mipadi señala en la respuesta de Kenan Banks , existe esta advertencia , también en la misma página web:
En CSS, los identificadores pueden comenzar con '-' (guión) o '_' (guión bajo). Las palabras clave y los nombres de propiedades que comienzan con '-' o '_' están reservados para extensiones específicas del proveedor. Estas extensiones específicas del proveedor deben tener uno de los siguientes formatos:
'-' + vendor identifier + '-' + meaningful name '_' + vendor identifier + '-' + meaningful nameEjemplo(s):
Por ejemplo, si la organización XYZ agregó una propiedad para describir el color del borde en el lado este de la pantalla, podrían llamarlo -xyz-border-east-color.
Otros ejemplos conocidos:
-moz-box-sizing -moz-border-radius -wap-accesskeySe garantiza que un guión inicial o un guión bajo nunca se utilizarán en una propiedad o palabra clave en ningún nivel actual o futuro de CSS. Por lo tanto, es posible que las implementaciones CSS típicas no reconozcan dichas propiedades y las ignoren de acuerdo con las reglas para manejar errores de análisis. Sin embargo, debido a que el guión inicial o el guión bajo son parte de la gramática, los implementadores de CSS 2.1 siempre deberían poder usar un analizador compatible con CSS, admitan o no extensiones específicas del proveedor.
Los autores deben evitar extensiones específicas de proveedores.
