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



4 Answers

Para mi sorpresa la mayoría de las respuestas aquí están equivocadas. 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 ])

Los enlaces de respuestas de Mathias Bynens a explanation y demos muestran cómo usar estos nombres. Escrito en el código CSS, es posible que deba escaparse un nombre de clase, pero eso no cambia el nombre de la clase. Por ejemplo, una representación innecesariamente rebasada se verá diferente de otras representaciones de ese nombre, pero aún se refiere al mismo nombre de clase.

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

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

Entonces, si necesitas convertir una cadena aleatoria en un nombre de clase CSS: cuida NUL y el espacio, y escapa (en consecuencia para CSS o HTML). Hecho.

Question

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

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



He respondido a su pregunta en profundidad aquí: explanation

El artículo también explica cómo escapar de cualquier carácter 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 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>



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. ¿Existe alguna solución para que las clases de CSS con nombres que comiencen con números sean válidos?



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

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

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

El artículo enlazado anteriormente dice que nunca los use, luego proporciona una lista de navegadores que no los admiten, todos los cuales son, en términos de números de usuarios, al menos, redundantes.






Related