CSS, Selectores Descendientes

En el articulo anterior habíamos revisado los selectores “básicos”, en este articulo añadiremos algunos selectores adicionales. Estos se relacionan con la aplicación de estilos a etiquetas que están contenidas dentro de otras etiquetas.

Selectores descendientes

Un elemento HTML es descendiente de otro cuando se encuentra contenido dentro de las etiquetas de apertura y cierre del otro elemento. En otras palabras el elemento descendiente se encuentra anidado dentro de otro elemento. Los niveles de anidamiento pueden ser varios, así un elemento (4) puede ser descendiente de otro elemento (3), el cual a su vez es descendiente de un elemento (2) y este a su vez es descendiente de un elemento (1).

El elemento (4) es descendiente de los elementos (1), (2) y (3), porque se encuentra dentro de las etiquetas de esos elementos, sin importar el nivel de anidamiento.

El elemento (3) es descendiente de los elementos (1) y (2). y el elemento (2) es solamente descendiente del elemento (1).

selectoradic-1

En el ejemplo mostrado hay un elemento <span> que es descendiente de los elementos <li>, <ul>  porque se encuentra contenido dentro de estas etiquetas.

Existe un segundo elemento <span> que solo es descendiente de <p>.

La sintaxis para definir selectores de elementos descendientes es la siguiente:

selector1 selector2 selector3 selectorn

donde selectorn es el elemento donde se aplicaran las reglas de estilo, y selector1, selector2 y selector3 es la cadena de elementos que contienen al elemento al que se aplicaran las reglas de estilo. cada elemento selector va separado por un espacio en blanco.

por ejemplo si quisiéramos aplicar un estilo al elemento span que esta dentro de la lista deberíamos indicar el selector de la siguiente forma:

ul li span {      }

La interpretación seria aplicar estas reglas de estilo al elemento span, que esta contenido dentro del elemento li, dentro del elemento ul .

este selector descendiente no aplicaría al otro elemento span.

veamos el siguiente fragmento de documento HTML, que tiene tres elementos <span>.

El primer elemento <span> esta dentro de la lista no ordenada (<ul>).

El segundo elemento <span> esta dentro de la lista ordenada (<ol>) y.

El tercer elemento <span> esta dentro de un elemento <p>.

selectoradic-2

y el archivo miestilo5.css, donde se estan creando reglas utilizando selectores descendientes para el elemento span que esta dentro de la lista no ordenada y para el elemento span que esta dentro del párrafo.

selectoradic-5

En la siguiente figura se muestra la salida del navegador.

selectoradic-6

Se observa que el span que esta en la lista ordenada aparece sin ningún

estilo resaltante. El texto que esta dentro del elemento span en la lista no ordenada aparece con color rojo y resaltado. y el elemento span que esta dentro del párrafo aparece de color verde.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s