Me quedo impresionado con la capacidad de comportamiento y efectos que se puede lograr con el uso de CSS.

No hablare de bordes redondeados ni de efectos de gradientes que se aplica muy bien con el estandar CSS3. Sino hablare de una especie de jerarquia que se maneja en hojas de estilos.

.eps > .esp

Esto indica una jerarquia. Traducido mas o menos seria: Para los elementos de clase esp dentro del contenedores o etiquetas de clase eps hacer.

Básicamente es una expresion de implicación al estilo Si … entonces.

Esta forma nos permite discriminar efectos en nuestro diseño. Por ejemplo si tenemos dos contenedores uno con el id header y el otro con el id body, y dentro de ellos, elementos span, que son dispuestos a manera de botones en header y en body a manera de mensajes. Tomemos este escenario, lo que tal vez hicieramos seria declarar por cada elemento span una clase. Digamos si estamos en header la clase .buttons, definidos por cada elemento y lo mismo en los elementos span del contenedor body. Un error sería colocar en la hoja de estilo una expresión general del elemento span. El error seria que lo que vayamos a poner afecte a los dos elementos span, tanto para el contenedor header como para el body.

Por lo tanto una solución sin utilizar una clase por cada elemento (que dicho de paso en una solución también) es usar el operador > de esta manera:

#header > span {}
#body > span {}

Esto permitira establecer a cada elemento span su reglas necesarias para cada contenedor, sin el uso de etiquetas class para cada elemento.

Otra de las posibilidades de esta expresion es en el uso de menus que tanto nos gusta.

Por ejemplo, tenemos un listado de link

<div id="nav">
	<ul>
		<li>Home</li>
		<li>Categorias
			<ul>
				<li>Casas</li>
				<li>Terrenos</li>
			</ul>
			</li>
		<li>contacto</li>
	</ul>
</div>
 

Esto mas o menos lo pondriamos en nuestro html

El documento de la hoja de cálculos sería:

#nav ul li > ul { display: hidden;}

Esto indicara que todos los elementos ul dentro de un elemento li no se muestren. Como se puede apreciar es muy útil.

Por último deseo mostrarles una aplicación de este operador que me dejo impresionado. Sobre la definicion de div con alineacion absoluta.

Normalmente se defiene un div con posicion absoluta con respecto a la pantalla donde se mostrará la pagina. Esta tecnica tiene muchos inconveniestes, pues sabemos que hay distitos tipos de monitores que pueden tener distinta resolución. dificultandonos su uso. Sin embargo si podemos definir un elemento con una posición conocida por ejemplo un div con id header y dentro de el un logo en una posición especial. Se podria usar la siguente aplicación

#header > #logo {
z-index:999;
width:210px;
position:absolute;
bottom:15px;
height:25px;
left:750px;
}
 

De esta manera tendriamos un div flotante con id logo, de manera que podamos mover a nuestra conveniencia su pocisión (usese las reglas de left o top para ello)

Nos vemos en otra oportunidad.