Introducción a CSS
La sintaxis formal del selector descendente se muestra a continuación:
elemento1 elemento2 elemento3 ... elemento N
Los selectores descendentes siempre están formados por dos o más partes
separadas entre sí por espacios en blanco. La última parte indica el elemento
sobre el que se aplican los estilos y todas las partes anteriores indican el lugar
en el que se tiene que encontrar ese elemento para que los estilos se apliquen
realmente.
En el siguiente ejemplo, el selector descendente se compone de cuatro partes:
p a span em { text-decoration: underline; }
Los estilos de la regla anterior se aplican a los elementos de tipo que se encuentren dentro de elementos de tipo , que a su vez se encuentren
dentro de elementos de tipo que se encuentren dentro de elementos de tipo
No debe confundirse el selector descendente con la combinación de selectores:
/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */
p, a, span, em { text-decoration: underline; }
/* El estilo se aplica solo a los elementos "em" que se
encuentran dentro de "p a span" */
p a span em { text-decoration: underline; }
Si se emplea el selector descendente combinado con el selector universal, se
puede restringir el alcance de un selector descendente. El siguiente ejemplo,
muestra los dos enlaces de color rojo: p a { color: red; }
Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra
de color rojo:
p * a { color: red; }
La razón es que el selector p * a se traduce como todos los elementos de tipo
dentro de un elemento de tipo
. Como el primer elemento se encuentra directamente bajo un elemento , no se
cumple la condición del selector p * a.
Fuente: Introducción a CSS
Javier Eguíluz Pérez
www.librosweb.es