Uso de Criterios de Selección Contextual

Se pueden definir estilos para utilizarse con todos los elementos HTML de una clase particular. Si se necesita un mayor control sobre el uso de estilos podemos hacer que estos se apliquen selectivamente. Podríamos, por ejemplo, querer que el texto enfatizado sea de color verde, pero sólo si el texto enfatizado está en el interior de un título de tamaño 4. Se puede conseguir este nivel de control sobre la aplicación de estilos usando los criterios de selección contextual. Estos, en general, permiten especificar que un estilo se aplicará sólo si un elemento se encuentra anidado dentro de un elemento de otro cierto tipo. Mediante la sintaxis, CSS esto se consigue listando ordenadamente los elementos HTML antes de las llaves. Con sintaxis JavaScript es necesario utilizar el método contextual().

Sintaxis CSS

<style type="text/css">

h4 em {color: green;}

</style>

Sintaxis JavaScript

<style type="text/javascript">

contextual(tags.h4, tags,em).color ="green";

</style>

Uso de la hoja de estilo

<h4>El <em>texto enfatizado</em> de este titulo es verde.</h4>

<p>En cambio este <em>texto enfatizado</em> no es verde.</p>

Resultado del ejemplo

El texto enfatizado de este titulo es verde.

En cambio este texto enfatizado no es verde.

Ahora se verá otro ejemplo que hace que las marcas de los elementos de la lista que hereden de al menos dos listas desordenadas sean de color azul.

Sintaxis CSS

ul ul li {color: blue;}

Sintaxis JavaScript

contextual(tags.ul, tags.ul, tags.li).color = "blue";

Se pueden utilizar los criterios de selección contextual para buscar etiquetas, clases, ids o combinaciones de estos. En el siguiente ejemplo se crea la clase MAGENTA que lo colorea todo de magenta. Todos los párrafos MAGENTA que estén dentro de un <div> estarán en cursiva. Además los textos dentro de <b> anidados dentro de párrafos dentro de un <div> en MAGENTA usarán una fuente grande.

Sintaxis CSS

<style type="text/css">

all.MAGENTA {color: magenta;}

div p.MAGENTA {font-style: italic;}

div p.MAGENTA b {font-size: large;}

</style>

Sintaxis JavaScript

<style type="text/javascript">

classes.MAGENTA.all.color = "magenta";

contextual(tags.div, classes.MAGENTA.p).fontStyle = "italic";

contextual(tags.div, classes.MAGENTA.p, tags.b).fontSize = "large";

</style>

Uso de la hoja de estilo

<div class=MAGENTA>

<h4> Titulo h4 en MAGENTA</h4>

<p>Este párrafo debería ser magenta y cursivo. Ahora viene un <b>texto grande</b>. Conseguimos este efecto con selección

contextual</p>

</div>

<p class="MAGENTA">Este párrafo todavía es MAGENTA, pero como no está dentro de un bloque <div>, no es cursivo.</p>

Resultado del ejemplo

Titulo h4 en MAGENTA

Este párrafo debería ser magenta y cursivo. Ahora viene un texto grande. Conseguimos este efecto con selección contextual

Este párrafo todavía es MAGENTA, pero como no esta dentro de un bloque <div>, no es cursivo.