Pregunta ¿Qué caracteres son válidos en los nombres / selectores de clases de CSS?


¿Qué caracteres / símbolos están permitidos dentro de los selectores de clase de CSS? Sé que los siguientes personajes son inválido, pero que personajes son válido?

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

1053
2018-01-15 23:37


origen


Respuestas:


Puede consultar directamente en el Gramática CSS.

Básicamente1, un nombre debe comenzar con un guión bajo (_), un guion (-), o una carta (a-z), seguido de cualquier número de guiones, guiones bajos, letras o números. Hay una trampa: si el primer carácter es un guión, el segundo personaje debe2 ser una letra o un guión bajo, y el nombre debe tener al menos 2 caracteres de longitud.

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

Los identificadores que comienzan con un guión o guión bajo suelen reservarse para extensiones específicas del navegador, como -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 he vinculado, una regla que comienza con DOS guiones, p. --indent1, es inválido. Sin embargo, estoy bastante seguro de haber visto esto en la práctica.


914
2018-01-15 23:42



Para mi sorpresa, la mayoría de las respuestas aquí son incorrectas. Resulta que:

Cualquier carácter excepto NUL está permitido en los nombres de clase CSS en CSS. (Si CSS contiene NUL (escapado o no), el resultado no está definido. [Caracteres CSS]

La respuesta de Mathias Bynens enlaces a explicación y población que muestra cómo usar estos nombres. Escrito en código CSS, un nombre de clase puede necesitar escaparse, pero eso no cambia el nombre de la clase. P.ej. una representación sobre-escapada innecesaria se verá diferente de otras representaciones de ese nombre, pero todavía se refiere al mismo nombre de clase.

La mayoría de los otros lenguajes (de programación) no tienen ese concepto de nombres de variable de escape ("identificadores"), por lo que todas las representaciones de una variable tienen que tener el mismo aspecto. Este no es el caso en CSS.

Tenga en cuenta que en HTML no hay forma de incluir caracteres de espacio (espacio, tabulación, avance de línea, avance de forma y retorno de carro) en un atributo de nombre de clase, porque ya separan las clases entre sí.

Por lo tanto, si necesita convertir una cadena aleatoria en un nombre de clase CSS: cuide de NUL y espacio, y escape (en consecuencia para CSS o HTML). Hecho.


138
2017-07-18 12:32



Leer el Especificación W3C. (esto es CSS 2.1, encuentre la versión adecuada para su asunción de navegadores)

editar: sigue el párrafo relevante:

En CSS, identificadores (incluidos   nombres de elementos, clases e ID en   selectores) puede contener solo el   caracteres [a-z0-9] e ISO 10646   caracteres U + 00A1 y superiores, más el   guión (-) y el guión bajo (_);   no pueden comenzar con un dígito, o un   guión seguido de un dígito.   Los identificadores también pueden contener escapes   personajes y cualquier carácter ISO 10646   como un código numérico (ver siguiente artículo). por   ejemplo, el identificador "B & W?" tal vez   escrito como "B \ & W \?" o "B \ 26 W \ 3F".

edición 2: como señala @mipadi en la respuesta de Triptych, está esto advertencia, también en la misma página web:

En CSS, los identificadores pueden comenzar con '-'   (guión) o '_' (guión bajo). Palabras clave   y nombres de propiedades que comienzan con '-'   o '_' están reservados para   extensiones específicas del proveedor. Tal   las extensiones específicas del proveedor deberían tener   uno de los siguientes formatos:

'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name

Ejemplo (s):

Por ejemplo, si se agregó la organización XYZ   una propiedad para describir el color de   el 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-accesskey

Un guion inicial o guion bajo es   garantizado nunca ser utilizado en una   propiedad o palabra clave por cualquier corriente o   nivel futuro de CSS. Así típico CSS   las implementaciones pueden no reconocer tales   propiedades y pueden ignorarlos   de acuerdo con las reglas de manejo   análisis de errores Sin embargo, porque el   guión inicial o guión bajo es parte de   la gramática, los implementadores de CSS 2.1   siempre debería ser capaz de usar un   Analizador conforme a CSS, ya sea o no   admiten cualquier proveedor específico   extensiones

Los autores deben evitar específicos del vendedor   extensiones


64
2018-01-15 23:45



He respondido tu pregunta en profundidad aquí: http://mathiasbynens.be/notes/css-escapes

El artículo también explica cómo escapar de cualquier personaje en CSS (y JavaScript), e hice una herramienta útil para esto también Desde esa página:

Si le dieras a un elemento un valor 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>

58
2017-07-06 06:41



La expresión regular completa es:

-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*

Así que todos los de tu lista excepto "-"Y"_"No están permitidos si se usan directamente. Pero puedes codificarlos usando una barra invertida foo\~bar o usando la notación Unicode foo\7E bar.


21
2018-01-16 00:05



Para HTML5 / CSS3, las clases y los ID pueden comenzar con números.


6
2017-10-12 14:04



Para aquellos que buscan una solución alternativa, puede usar un selector de atributos, por ejemplo, si su clase comienza con un número. Cambio:

.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

a esto:

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

Además, si hay varias clases, tendrá que especificarlas en el selector, creo.

Fuentes:

  1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
  2. ¿Hay alguna solución para hacer que las clases de CSS con nombres que comiencen con números sean válidas?

6
2018-06-23 17:33