El lector Paul escribe en:
Cuál es la diferencia entre .container div { } y div.container { }?
Es genial que hagas preguntas como esta, Paul. La respuesta es muy importante para entender CSS, porque estos dos selectores seleccionan cosas muy diferentes. Esto es bastante similar a esta pregunta de hace un tiempo.
Tal vez una buena manera de explicar su diferencia es razonarlos en un “inglés sencillo”.
.contenedor div
“Seleccione cualquier elemento div que sea hijo de cualquier elemento con un nombre de clase de “contenedor”
div.contenedor
“Seleccione cualquier elemento div que tenga un nombre de clase de” contenedor “
La diferencia clave entre ellos es el espacio. Un espacio en un selector CSS tiene un significado muy especial. Significa que la parte del selector que se encuentra a la derecha del espacio está dentro (un hijo de) la parte del selector a la izquierda. Esto no se aplica a su segundo ejemplo, porque no tiene espacio.
El segundo concepto en el trabajo aquí es lo que se llama calificación de etiqueta, que puede ser un poco confuso. El selector calificado de etiquetas es div.container. Significa que solo seleccionará <div> elementos con un nombre de clase de “contenedor” y ningún otro elemento. Quitar el div y tu tienes .container que es casi lo mismo, solo seleccionará cualquier elemento con ese nombre de clase. Un selector calificado por etiqueta tiene una especificidad ligeramente mayor. Personalmente, rara vez uso selectores calificados por etiquetas. Son menos flexibles y técnicamente menos eficientes.