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


Answers

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. [ CSS-characters ])

La respuesta de Mathias Bynens tiene enlaces a explanation y demos muestran 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. Por ejemplo, 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 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.

Question

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

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



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




He respondido tu pregunta en profundidad aquí: explanation

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

Si le diera 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>



Entiendo que el guión bajo es técnicamente válido. Revisa:

https://developer.mozilla.org/en/underscores_in_class_and_id_names

"... errata a la especificación publicada a principios de 2001 hizo subrayados legales por primera vez".

El artículo vinculado anteriormente dice que nunca los use, luego da una lista de navegadores que no los admiten, todos los cuales son, en términos de números de usuarios, redundantes durante mucho tiempo.






Related