Un espacio hace la diferencia

Todos sabemos que los caracteres espacio son importantes; separan las palabras y evitar que eso que escribimosseaungalimatíasilegible.

En CSS pasa lo mismo, no tanto porque no pueda leerse eso que escribimos sino porque al no estar donde deben estar, el resultado es un error. El caso típico es el de la propiedad background; si escribimos esto:

background:#FFF url(una_imagen)no-repeat left top;

en Intenet Explorer no se verá la imagen y no es un error del navegador, es que lo hemos escrito mal, sin dejar el espacio entre el cierre del paréntesis y la palabra no-repeat

Pero no sólo se producen errores en tal o cual navegador, es algo que podría ocurrir en todos si, por ejemplo, queremos poner una regla de estilo para que una etiqueta span tenga un determinado formato (color rojo en este caso):

<div id="demo" class="ejemplo">
  .......
  un texto cualquiera <span>esto en rojo</span> un texto cualquiera.
  .......
</div>

¿Cuál sería la regla de estilo?

#demo.ejemplo span { color:#F00; }

o

#demo .ejemplo span { color:#F00; }

Si usamos la primera, todo estará bien; si usamos la segunda, no pasará nada. Esto, se debe a que el espacio indica "algo".

Maecenas porta felis pharetra diam suscipit id vehicula urna ullamcorper. Aenean a interdum nibh. Nam enim nunc, aliquet et egestas vitae cras amet.

En la primer, traducida al español, se indica que en el elemento cuyo ID es demo y cuya clase es ejemplo, las etiquetas SPAN interiores son de color rojo. Por eso, no hay un espacio intermedio.

En la segunda decimos que en el elemento cuyo ID es demo, en toda etiqueta interna que sea de la clase ejemplo, las etiquetas SPAN internas serán de color rojo; el HTML debería tener esta estructura:

<div id="demo">
  .......
  <div class="ejemplo">
    un texto cualquiera <span>esto en rojo</span> un texto cualquiera.
  </div>
  .......
  <div class="otra">
    un texto cualquiera <span>esto no será de color rojo</span> un texto cualquiera.
  </div>
  .......
</div>

Maecenas porta felis pharetra diam suscipit id vehicula urna ullamcorper. Aenean a interdum nibh. Nam enim nunc, aliquet et egestas vitae cras amet.

Maecenas porta felis pharetra diam suscipit id vehicula urna ullamcorper. Aenean a interdum nibh. Nam enim nunc, aliquet et egestas vitae cras amet.

Por supuesto, la primera parece redundante y no siempre es necesario escribirlas de ese modo indicando el ID y la clase; estas dos reglas también harían lo mismo en el primer ejemplo:

#demo span { color:#F00; }
.ejemplo span { color:#F00; }

y esta haría lo mismo en el segundo ejemplo:

.ejemplo span { color:#F00; }

No todo funcionará igual, las reglas también dependen de lo que se llama prioridad por lo que ciertas definiciones no son tenidas en cuenta ya que hay otras que indican lo contrario y para el navegador, son más "importantes". Un ejemplo, si tuviera estas tres:

#demo.ejemplo span { color:#F00; } /* color rojo */
#demo span { color:#FF0; } /* color amarillo */
.ejemplo span { color:#0F0; } /* color verde */

el SPAN se vería de color rojo pese a que las otras dos reglas dicen lo contrario; si elimino la primera ser vería amarillo así que si quisiera que se viera verde, sólo debería incluir la última o agregar la palabra !important a alguna de ellas para forzar al navegador a prestar atención.

Maecenas porta felis pharetra diam suscipit id vehicula urna ullamcorper. Aenean a interdum nibh. Nam enim nunc, aliquet et egestas vitae cras amet.