Selectores de descendientes

Un selector puede tener varias partes separadas por espacios. Por ejemplo:

p strong { ... }
ul .hit { ... }
.footer .menu a { ... }

Son los selectores de descendientes. Permiten aplicar estilos a un elemento solo cuando está dentro de otro elemento determinado.

Por ejemplo, el selector .menu a selecciona un enlace a solo si está dentro de un elemento con la clase menu.

Resulta más fácil leer estos selectores de derecha a izquierda:

/* selecciona todos los elementos strong dentro de elementos p */
p strong { ... }

/* selecciona todos los elementos con la clase hit dentro de elementos ul */
ul .hit { ... }

/* selecciona todos los enlaces dentro de elementos con la clase menu,
   que a su vez están dentro de elementos con la clase footer */
.footer .menu a { ... }

Así podemos aplicar distintos estilos según el contexto de cada elemento. Si un enlace está dentro del menú, podemos aumentar su tamaño; si está dentro del texto principal, podemos asignarle un color.

En este ejercicio practicarás con selectores de descendientes.