Selectores descendentes

Permite seleccionar elementos que se encuentran dentro de otros elementos. Por ejemplo:

p h1 {
    color: red;
}

El estilo anterior se aplicará a todas las etiquetas <h1> que estén dentro de bloques . Hay que tener en cuenta que el elemento <h1> no tiene por qué ser descendiente directo.

El nivel de anidación puede tener varios niveles. Por ejemplo:

p a b i {
    text-decoration: underline;
}

Para que se aplique el estilo anterior se deben cumplir las siguientes situaciones:

Debe haber un elemento  dentro de un .
Además, el elemento  debe estar dentro de un <a>.
Y, para terminar, el elemento <a> debe estar dentro de un .

Dicho de otro modo, el estilo se aplica a los elementos , dentro de etiquetas , anidados dentro de <a> que se encuentren en .

Selector descendente y múltiples etiquetas

Es importante tener en cuenta que, si no tenemos cuidado, podemos confundir el selector descendente con la aplicación de un mismo estilo a distintas etiquetas.

Los dos bloques de código que se muestran a continuación, no son equivalentes:

p a b i { color: blue; } 

p,a,b,i { color: blue; }

El segundo bloque de código aplica el color azul a las etiquetas , <a>,  e , independientemente de su anidación.

También podemos combinar el selector universal con selectores descendentes. Por ejemplo:

p * b {
    color: #0000FF;
}

Este bloque aplica a todas las etiquetas de tipo  que estén anidadas en cualquier otra etiqueta que a su vez esté dentro de una etiqueta de tipo .

Sin embargo, no se aplicará a las etiquetas de tipo  que estén dentro de una etiqueta de tipo  directamente. Es necesario que haya otro elemento dentre  y .