Error Bloque de regla CSS sin selector
Por qué un bloque { ... } a secas, sin nada antes de la llave de apertura, es CSS inválido, y las formas más comunes en que pasa por accidente.
El validador marca un bloque { ... } que no tiene texto de selector inmediatamente antes de la llave de apertura.
Ejemplo
/* Incorrecto: sin selector */
{
color: red;
}
/* Correcto */
.texto-error {
color: red;
}Esto pasa sobre todo después de eliminar un selector dejando su bloque atrás, o cuando falta la llave de cierre de una regla anterior y fusiona dos reglas en una — lo cual hace que lo que parece un segundo selector termine consumido como parte del cuerpo de la primera regla.
Por qué importa
Toda regla CSS necesita un selector que le diga al navegador a qué elementos se aplican las declaraciones — un bloque sin selector simplemente no es una regla válida, y los navegadores lo omiten por completo (la especificación de parseo de CSS está diseñada para tolerar fallos, descartando lo que no puede interpretar en vez de fallar toda la hoja de estilos). Las declaraciones de adentro se descartan en silencio, sin ningún error visible, lo cual convierte esto en una fuente silenciosa de confusión del tipo "por qué no se aplica este estilo".
Frequently asked questions
¿El navegador muestra un error para un bloque sin selector?
No — CSS está diseñado para fallar de forma controlada. El parser del navegador simplemente descarta la regla inválida y sigue analizando el resto de la hoja de estilos, así que no hay ningún error en la consola que señale el problema.
¿Es el mismo problema que una llave sin cerrar?
Están relacionados pero son distintos. Una llave sin cerrar fusiona reglas y malinterpreta todo lo que viene después. Un selector faltante es un solo bloque, correctamente encerrado en llaves, que simplemente no tiene nada que identifique a qué elementos apunta.