Aclarando la cuestión de si "los ids y class pueden comenzar por un número" 16.4.15
Una aclaración documentada y argumentada a la cuestión de si los ids y clases pueden comenzar por un número o no. Matizando lo que es atributo Html y su valor y su uso en el selector Css.
Aclarando la cuestión de si "los ids y class pueden comenzar por un número"
Artículo revisado el 16-04-2015. Publicado originalmente en el blog en Enero de 2014.
Todos hemos escuchado alguna vez aquello de que los ids o clases no pueden comenzar con un número. Y todos, estoy seguro, dais 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, lo digo una vez más, 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 mezcolanza 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, y que me perdonen, entre los grandes, como aquí.
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 partes 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. Repite conmigo una vez más:
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.
<article class='1'>
<a href='#5'>Ir al punto 5</a>
<!-- otro contenido -->
<h2 id='5'>Punto 5</h2>
</article>
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:
- 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.
- que inmediatamente tras el indicador del tipo de selector '.' o '#' tampoco puede ir alguno de los carácteres no permitidos.
- 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 [ ].
<p class='1'> ... </p>
[class='1'] {
/* Sí funcionará */
}
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 Selectors 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":
<p class='1'> ... </p>
.\31 {
/* Sí funcionará */
}
See the Pen Number at the beginning by Kseso (@Kseso) on CodePen
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Totalmente cierto. Y muchos cometemos el error de afirmar que no se pueden usar números, pero no aclaramos que el drama aparece solamente al referenciar una clase o un identificador con CSS. Porque ni siquiera pasa con javascript.
ResponderEliminarDe hecho, recuerdo un caso en que alguien ya estaba desesperado pidiendo ayuda por todos los foros, porque resulta que los números no son los únicos que traen problemas, y un JS apuntaba a las clases que empezaban con un guión bajo (underscore "_") y el IE6 no les daba formato con CSS ... porque no las veía. La "solución" que pedían era una expresión regular que haga un milagro (o algo así), y que reescribiera todas las clases duplicando el valor sin el guión; pero por suerte alguien que se paso varios años batallando con IE6 recordó que escapando como mostrás aquí, todos los navegadores interpretan el guión.
Y no sólo el underscore, sino cualquier caracter unicode que (por lo común) se genera con un programa, como por ejemplo
#\♫ {...}
<div id="♫">...
Claro que en los navegadores nuevos también vale el selector por atributos y valores.
¿Por qué tantos años hasta que al fin alguien escribió este artículo?.
Gracias!.
Gracias Furoya
EliminarVeo que era necesario resaltar y ser más preciso qué y en qué casos no está permitido el uso de según qué carácteres.
Espero que ahora haya quedado más claro y entendible.
Faltaba más. Insisto, gracias a vos, porque éste es uno de los mitos que faltaba voltear. Por más que enlacés una especificación que tenga algunos años, siempre es necesario un artículo para encaminar la investigación y las pruebas posteriores que permitan fijar el concepto.
EliminarPor otro lado, ya sabés que soy un viejo pesado que aprovecha cualquier excusa para contar historias de otras épocas.
...
ResponderEliminarGenial como siempre, y tengo una pregunta imaginemos que quiero aplicarlo a un selector de numero grande digamos .9887 { color: red} el caracter que necesito que escape es el 9 es decir .\9 ¿y el resto como lo conecto? ¿como le digo que ahi termina el escape?
ResponderEliminarNo se entiende que es lo que deseas lograr, porqué quieres escapar sólo el 9?. Cuál es el objetivo?
EliminarHola Daniel.
EliminarMira la demo pues he incluido otras variantes, incluida tu duda.
Como observación: es buena idea leerse la especificación, en este caso el enlace "escape Css" va directo al apartado concreto (y en este caso está en español)
Fíjate especialmente en lo referente al espacio en blanco que menciona ;-)
Raylin
Porque la prohibición referente al uso de números en los selectores css sólo aplica a comenzar el selector por un número. No a que sea el 2º carácter y posteriores (igual que con los guiones y otros símbolos especiales).
La respuesta sobre el espacio en blanco también es la solución a tu "A mí no me funcionó en ningún navegador" lo mismo que la recomendación de consultar las especificaciones.
Un saludo
Cuando se usa Javascript y quieres referirte a un elemento cuyo identificador tiene Numero, pues no lo lee. Una vez hice esa prueba.
ResponderEliminarLenin
EliminarDesconozco el mecanismo de javascript para lidiar con este tema. Pero creo (en mi desconocimiento) que alguna forma tendrá implementada para lograrlo.
De no ser así, que de nuevo lo dudo, supondría una carencia importante.
Un saludo
Fue mi error, yo mencioné al JS. Y sí, funciona prefectamente. No pongo un ejemplo porque estamos en un blog de CSS, pero baste con el razonamiento de que javascript puede buscar un elemento por su identificador HTML; y en HTML el 'id=' que comience con un número es perfectamente válido. No tiene por qué ignorarlo. A menos que algún navegador tenga ese bug, pero entonces ya es problema del navegador.
EliminarPerdon, *"....cuyo identificador comienza con un Numero...."
ResponderEliminarA mí no me funcionó en ningún navegador
ResponderEliminar#\1{
color:red;
}