Loading...

Introducción a CSS 2.1.3. Selector descendente


Introducción a
CSS
2.1.3. Selector descendente
Selecciona los elementos que se encuentran dentro de otros elementos.
 Un elemento es descendiente de otro cuando se encuentra entre las
 etiquetas de apertura y de cierre del otro elemento.
El selector del siguiente ejemplo selecciona todos los elementos
de la página que se encuentren dentro de un elemento
: p span { color:
 red; }
Si el código HTML de la página es el siguiente:
...texto1
......texto2...

El selector p span selecciona tanto texto1 como texto2. El motivo es que
en el selector descendente, un elemento no tiene que ser "hijo directo" de
otro. La única condición es que un elemento debe estar dentro de otro
 elemento, sin importar lo profundo que se encuentre.
Al resto de elementos de la página que no están dentro de un elemento

, no se les aplica la regla CSS anterior.
Los selectores descendentes permiten mejorar la precisión del selector de
 tipo o etiqueta. Así, utilizando el selector descendente es posible aplicar
diferentes estilos a los elementos del mismo tipo. El siguiente ejemplo amplía
 el anterior y muestra de color azul todo el texto de los contenidos
 dentro de un

: p span { color: red; }h1 span { color: blue; }
Con las reglas CSS anteriores:
▪ Los elementos que se encuentran dentro de un elemento
se
muestran de color rojo.
▪ Los elementos que se encuentran dentro de un elemento

se
 muestran de color azul.
▪ El resto de elementos de la página, se muestran con el color por
 defecto aplicado por el navegador.
Fuente: Introducción a CSS
Javier Eguíluz Pérez