CÓMO USAR LAS CLASES (CLASS) E ID's (ID) EN CSS

Todos hemos escuchado alguna vez aquello de que los ids o clases no pueden comenzar con un número. Y todos, estoy seguro, damos la sentencia por buena

Sin embargo, el aceptar esta afirmación dicha de forma tan simple y ambigua da lugar a errores, pues así expresada es de todo punto errónea por inexacta.

Lo primero que debemos hacer, es tener claro que hay que diferenciar el lenguaje Html del lenguaje Css, lo que le es propio a cada uno de ellos y lo que uno u otro permite o prohíbe. Esto es, utilizar la terminología y sintaxis de cada uno de ellos con propiedad.

La mezcla de conceptos distintos, el asumir que lo que es válido en uno lo es en otro o no distinguir cuándo se referencia a uno u otro da lugar a errores típicos como hablar de atributos o elementos en el ámbito de Css o la afirmación que nos ocupa. Incluso

Aclarando la cuestión del inicio por un número de ids o clases

 Así que antes de seguir tienes que tener muy claro que una cosa son los elementos del html y sus partesd  y otra muy distinta los selectores de Css. Pese a la íntima relación que existe entre ellos no hay que confundir el valor del atributo de id o clase en el marcado html con el selector de clase o de id en las hojas de estilos. 

 Una cosa son los elementos del Html
y otra muy distinta los selectores de Css.

Una cosa es el atributo (de clase o de id) y su valor en el lenguaje Html
y otra cosa muy distinta los selectores de ids o de clases en Css. 

En el lenguaje html

Nada impide que en el marcado del documento html el valor del atributo id o del atributo clase comience por un número. Es totalmente lícito y funcional. Es más, en según qué circunstancias, será lo correcto y la única manera de hacerlo.

                                 

El código Html anterior es totalmente válido y si lo pasas por el validador verás que no marca ni error ni advertencia porque el valor de los atributos class e id comienzan por números. Además el enlace cuyo atributo href es un número también funcionará perfectamente.

En el lenguaje Css

Es exclusivamente en el ámbito del lenguaje Css donde es cierta la afirmación que dice que el nombre de un selector Css no puede comenzar por un número:

 

los identificadores (incluyendo los nombres de los elementos, clases e ID de los selectores) pueden contener sólo caracteres [A-Za-z0-9] y los caracteres 161 en adelante en ISO 10646, más el guión (-); no pueden comenzar con un guión o un número. También pueden contener caracteres con escape y cualquier carácter de ISO 10646 en forma de código numérico (ver el siguiente ítem). Por ejemplo, el identificador "B&W?" puede escribirse como "B\&W\?" o "B\26 W\3F".

O siendo más precisos, la especificación dice:

1. que el nombre de un selector Css de clase o de id no puede tener un número inmediatamente a continuación del símbolo '.' o '#' que identifica el tipo de selector que es.
2. que inmediatamente tras el indicador del tipo de selector '.' o '#' tampoco puede ir alguno de los carácteres no permitidos.
3. que hay una serie de carácteres que no pueden formar parte del nombre de los selectores, con independencia del lugar que ocupen dentro de él. Como @ >, étc.

Y hago esta última puntualización porque a un elemento del html con cierto valor en su atributo class o id podemos referenciarlo en la hoja de estilos utilizando distintos selectores: con el selector de id o clase y con el selector de atributo, por ejemplo, o haciendo uso de los selectores de pseudoclase o con los combinadores >, ~, /ref/ étc).

 Permitiendo iniciar selectores Css con un número

Llegados a este punto en el que tenemos un valor que en html es válido y funcional y que las especificaciones de Css no permiten utilizar la cuestión es cómo resolver la colisión.

La respuesta tradicional y más popular es recomendar no usar en html valores para esos atributos que comiencen por números. Repito, no porque no lo permita el propio html, que sí lo admite.

Pero ¿y si ya te lo encuentras y tienes la necesidad de utilizar ese valor y no tienes acceso al html o al archivo que lo genera?

Tienes dos vías para lograrlo. La primera es utilizar en el Css el selector de atributo. Ese que se conforma con corchetes [ ].

                                 

Pero anterior a la llegada de este tipo de selector por valor de atributo la especificación Css ya proveyó una forma de poder utilizar un selector de clase o id que comience por un número o cualquier otro carácter de los no permitidos por la especificación.

Para ello definió la barra invertida \ como carácter de "escape Css". Aspecto que sigue siendo válido e incluido en la última recomendación selector level 3.

Así, en el caso de querer o necesitar que un selector de clase o id comience en la hoja de estilos, o dentro del elemento <style> en el html, por un número o cualquier otro carácter no permitido en Css sólo hay que "escaparlo":