mozilla

Revision 269197 of CSS dinámico

  • Enlace amigable (slug) de la revisión: CSS_dinámico
  • Título de la revisión: CSS dinámico
  • Id de la revisión: 269197
  • Creada:
  • Creador: Jorolo
  • ¿Es la revisión actual? No
  • Comentario /* CSS-3 */

Contenido de la revisión

Introducción

Tradicionalmente las páginas web se han dividido en dos categorías: estáticas y dinámicas. Hemos leído muchas veces que con XHTML y CSS se pueden crear documentos de calidad, pero estos serán fijos, estáticos. Si quieres que tus páginas se adapten y cambien según las acciones del usuario, si quieres dinamismo, necesitas javascript o similares... Ya no.

Si teniamos DHTML (html dinámico), ahora tenemos CDSS (Css Dinámico Sin Scripts). No lo busquéis en Google, me lo acabo de inventar. Como en un cuento en el que un humilde sapo acaba siendo el príncipe de la historia, unas modestas pseudo-clases pueden acabar siendo las estrellas de la Web. Las pseudo-clases en principio nacieron para darle dinamismo a los enlaces, y este es el uso que se les ha dado durante los últimos años. Es raro el archivo CSS que no incluya unas lineas semejantes a estas:

a:link { ... }
a:active { ... } 
a:visited { ... }

¡Pero la situación ha cambiado! Ahora podemos aplicarle pseudo-clases a la mayoría de los elementos, y jugando con los selectores podemos crear documentos dinámicos usando exclusivamente CSS.

Poco a poco

Lo veremos poco a poco y por medio de ejemplos, centrándomos en la pseudo-clase :hover. Obviamente combinando diversas pseudo-clases pueden obtenerse efectos más complejos.

Empecemos por el uso tradicional:

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>

a:hover { color: red; }

</style>

<p>Párrafo con <a>enlace</a> que se pone rojo</p>

Soltamos amarras, levamos 'anclas' y...

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>

p:hover { color: red; font-variant: small-caps; }
li:hover { color: blue; background: silver; }  
div:hover { color: orange; text-align: right; }

</style>

<p>Párrafo que se pone rojo y mayúsculo</p>
<ul> <li>Item que se pone azul y con fondo gris</li> </ul>
<div>División con texto que se flota a la derecha y se pone naranja</div> 

Esto nos permite crear con facilidad efectos dinámicos, podemos cambiar la visualización de las cosas dependiendo de los actos del usuario. Con un poco de imaginación y buen gusto se pueden hacer maravillas.

La cosa da mucho juego

Podemos cambiar cualquier propiedad, pero no todas son igual de útiles a la hora de crear dinamismo. Algunas de las más interesantes serían por ejemplo: display, position, z-index...

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>

.comun { position: absolute; width: 10em; 
	 padding: 2em; text-align: center; }

#rojo { background-color: red;
        left: 1em; top: 1em; 
        z-index: 1; }

#azul { background-color: blue;
        left: 5em; top: 5em; 
        z-index: 2; }

#naranja { background-color: orange;
           left: 9em; top: 2em; 
           z-index: 3; }

#rojo:hover,
#azul:hover,
#naranja:hover { z-index: 4; }

</style>

<p id='rojo'    class='comun'>El rojo es vivo</p>
<p id='azul'    class='comun'>El azul es elegante</p>
<p id='naranja' class='comun'>El naranja es guay</p>

Pero esto no es todo, aún hay más.

Jugando con los selectores podemos relacionar unos elementos con otros.

Por ejemplo: al posicionarnos sobre p cambiamos las propiedades de a, y al posicionarnos sobre a cambiamos las propiedades de em.

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>

em { display: none; }

p:hover a { color: red; }
a:hover em { display: inline; }

</style>

<p>Párrafo <a>con enlace <em>que se pone rojo</em> </a> </p>

También se pueden cambiar simultaneamente las propiedades de múltiples elementos. Basta con reiterar las declaraciones:

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>

p:hover em { text-decoration: underline;}
p:hover strong { text-transform: uppercase;}

</style>

<p>Hay cosas <em>importantes</em> y otras <strong>muy importantes</strong> </p>

Bueno, despues de unos ejemplos simples, uno un poco más complejo:

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'> 

.editorial { width: 30%;} 
.item { list-style: none; list-style-position: inside; 
        padding: 0.2ex; margin: 0.2ex; } 

a { color: darkblue; text-decoration: none;} 
div:hover a { color: blue; text-decoration: underline;} 

.oculto ul { display: none; } 
div:hover ul { display: block; }

ul { border: transparent solid 0.1ex; } 
ul:hover { border: peru solid 0.1ex; } 

ul:hover abbr,
ul:hover dfn { color: red; } 
 
.vista { visibility: hidden; } 
ul:hover .vista { visibility: visible; } 

</style> 

<div class='editorial oculto'> 
   <h2> <a> HTML </a> </h2> 
   <ul class='item'> 
      <li> <dfn>HTML</dfn> es un lenguaje para el marcado de hipertextos.</li> 
      <li>Es un estándar del <abbr>W3C</abbr>. </li> 
      <li class='vista'>Creado por Tim Berners-Lee.</li> 
   </ul> 
</div> 

<div class='editorial'> 
   <h2> <a> CSS </a> </h2> 
   <ul class='item'> 
      <li> <dfn>CSS</dfn> es una c seguida de dos eses.</li> 
      <li>También es un estándar del <abbr>W3C</abbr>. </li> 
      <li class='vista'>No sé me ocurre qué poner aquí.</li>
   </ul> 
</div>  

Tipos de relaciones 'familiares'

Hasta el momento todos los ejemplos muestran relaciones padre → descendiente, si has leído los enlaces que puse sabrás que no son las únicas, las posibilidades son las siguientes:

Padre → hijo

Esta relación se expresa por medio del combinador (">"), relaciona un elemento con sus descendientes directos. En el siguiente ejemplo seleccionamos los elementos con clase 'subrayado' que sean hijos directos de body

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>

body:hover > .subrayado { text-decoration: underline;}

</style>

<p> Lo siguiente es una  
 <span class='subrayado'>cita</span>: 
</p>
<hr>
<blockquote class='subrayado'> Si buscas resultados distintos, no hagas siempre lo mismo.  
 <cite>Einstein</cite> 
</blockquote>
Padre → descendiente

Esta relación se expresa por medio de un espacio en blanco (" ") relaciona un elemento con un descendiente. Este es el método más flexible, puedes seleccionar cualquier elemento independientemente del parentesco exacto.

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>

     p:hover em { visibility: hidden;}

</style>

<h2> Selección de descendientes</h2>
<p> 
  <em>Este em es hijo de un párrafo</em> 
  <span> span tambien, pero...
     <em>Este em no es hijo de un párrafo, </em> 
     aunque sí descendiente (hijo de un hijo).
  </span> 
</p>
Hermano → hermano (adyacente)

Esta relación es expresa por medio del combinador ("+"), relaciona un elemento con su hermano adyacente (el inmediatamente siquiente). Este es el método aparentemente más limitado, pero el que abre más puertas.

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>

#primero + li { list-style-type: none; }

</style>

<ul>
  <li id='primero'>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>


Esto de relacionar hermanos está muy bien, pero solo se puede seleccionar el adyacente, esto es una limitación importante, pero bueno, siempre puedes seleccionar el adyacente del adyacente, o el...

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>

#primero + li + li + li { list-style-type: none; }

</style>

<ul>
  <li id='primero'>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>
Otros parentescos

Padres, hijos y hermanos no son las únicas relaciones dentro de una familia. ¿Qué pasa si quiero seleccionar un nieto, o un sobrino? ¿Se puede?

Seleccionando un nieto
No tiene mayor complicación, al fin y al cabo un nieto no es más que un hijo de un hijo.
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>

p:hover > span > em { color: red; }

</style>

<p> 
 <em>este em es hijo de un párrafo</em> 
 <span> span también, pero...
   <em>este em es nieto</em> </span> 
</p>
Seleccionando un sobrino.
No hay problema, un sobrino no es más que un hijo de un hermano.
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>

p:hover + div > em { color: red; }

</style>

<p>Al ponerte sobre este párrafo</p> 
<div> Cambias las propiedades de 
   <em>este em</em> 
</div>
Limitaciones

De los ejemplos anteriores se desprende que es muy facil abarcar todas las combinaciones posibles. Siempre y cuando la secuencia de los selectores sea:

  1. Descendente - Un elemento y sus descendientes.
  2. Horizontal - Un elemento y sus hermanos.
  3. Mixta - Un elemento y los descendientes de sus hermanos.

Lo que no se puede hacer es seleccionar un ascendiente (ej. un padre). Por lo tanto el siquiente ejemplo ni funciona ni debe hacerlo:

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>

em:hover #div { color: red; }

</style>

<h1>Este ejemplo ni funciona ni debe hacerlo.</h1> 

<div id='div'> 
   <em>Este em</em> 
   no puede cambiar las propiedades de su padre.
</div>

Llamemos a las cosas por su nombre, y ordenémoslas según su clase

Por supuesto, las relaciones pueden asignarse mediante class e id.

Seleccionemos los elementos de la clase 'especial' que sean descendientes de #este-elemento en el caso de que sea descendiente de #ul

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>

#ul:hover #este-elemento .especial { color: red; }

</style>

<ul id='ul'>

  <li id='este-elemento'>
    <ul>
      <li class='especial'>item especial</li>
      <li>item corriente</li>
    </ul>
  </li>

  <li class='especial'>item especial, pero...</li>

</ul>

Solo hay una curiosa limitación ¿será un bug? Un selector compuesto puede empezar por un elemento o por un #id con :hover, Pero no puede empezar por una clase con :hover. Sorprendentemente con el selector universal (*) tampoco funciona.

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>

* { color: red; }

  .uno       .cero { color: blue; }      /* esto sí funciona */
 *.uno       .cerocero { color: blue; }  /* esto sí funciona */

  #uno:hover .dos { color: blue; }       /* esto sí funciona */
ul.uno:hover .cuatro { color: blue; }    /* esto sí funciona */

  .uno:hover .tres { color: blue; }      /* esto NO funciona */
 *.uno:hover .cinco { color: blue; }     /* esto TAMPOCO funciona */

</style>

<div class='uno'>
  .uno       .cero { color: blue; }
  <em class='cero'>Esto sí funciona,</em> y... <br>
  *.uno       .cerocero { color: blue; }
  <em class='cerocero'>esto también funciona.</em> 
</div>

<ul id='uno' class='uno'>
  <li class='dos'>#uno:hover .dos - esto sí funciona.</li>
  <li class='tres'>.uno:hover .tres - esto NO funciona.</li>
  <li class='cuatro'>ul.uno:hover .cuatro - esto sí funciona.</li>
  <li class='cinco'>*.uno:hover .cinco - esto TAMPOCO funciona.</li>
</ul>

Navegadores que lo soportan

Los navegadores pueden dividirse en dos grupos: IE y el resto.

  • IE: IE6 no lo soporta, pero IE7 sí, aunque parece que solo parcialmente... (probado en IE7 beta)
  • El resto: Cada día son más los navegadores que soportan este uso de las pseudo-clases:
    • Firefox 1.5 - si lo soporta (al igual que todos los navegadores basados en las últimas versiones de Gecko)
    • Opera (pendiente de confirmación plena)
    • Konqueror/Safari - (pendiente de confirmación plena)(al igual que todos los navegadores basados en las últimas versiones de KHTML)

Referencia

Lo cierto es que no hay mucho escrito sobre el tema, (en castellano casi nada, o nada), la gente solo suele escribir sobre las cosas que funcionan en IE. (Buscar un par de enlaces interesantes para ponerlos aquí)

Pero tampoco hace mucha falta. Todo lo que necesitamos está en el estándar CSS-2. además 'curiosamente' los dos pilares que sostienen esta funcionalidad (pseudoclases y selectores), están explicados en la misma página: El capítulo 5.

Recomiendo encarecidamente la lectura completa y atenta de todo el capítulo, y ya puestos de toda la especificación. Aunque para el asunto que nos ocupa nos interesan principamente:

Sobre los selectores por parentesco, sub-capítulos: 5.5, 5.6, 5.7
Sobre las pseudo-clases, sub-capítulo: 5.11,

CSS-3

Todo lo explicado es conforme a CSS-2.1 ¿Qué nos depara el futuro? Si los pilares de esta técnica son las pseudo-clases y los selectores, CSS-3 traerá muchas más pseudo-clases y muchos más selectores. En definitiva, muchas más posibilidades de hacer cosas interesantes.

Por ejemplo, hemos visto las limitaciones de CSS-2 para seleccionar hermanos, con CSS-3 esta limitación desaparece. Lo siguiente es CSS-3 pero funciona (usando el navegador apropiado).

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>

.gracias { visibility: hidden; }

#primero:hover + .gracias { visibility: visible; }
#primero:hover ~ * span { color: red; } /* esto:'~' es CSS-3 */

</style>

<ul>
  <li id='primero'>Por favor, ponga el cursor encima de esta frase.</li>
  <li class='gracias'>Le doy las gracias con CSS-2.1</li>
  <li>Item normal y corriente</li>
  <li>El futuro: <span>span en rojo gracias a CSS-3</span></li>
</ul>

Notas finales

Sí, ya sé que con JavaScript o php pueden hacerse cosas mucho más avanzadas, pero aquí está la gracia del artículo, que sin necesidad de Javascript o php, solo con CSS, puede añadírsele mucho dinamismo a las páginas web.

Este artículo es solo una introducción al tema, por razones didácticas los ejemplos son premeditadamente simples y limitados a una sola pseudo-clase (:hover). Puede que en el futuro exista un CSS Dinámico II que profundice más en el tema, muestre el uso de otras pseudo-clases y ejemplos más complejos.

Categorías

Fuente de la revisión

<p>
</p>
<h3 name="Introducci.C3.B3n"> Introducción </h3>
<p>Tradicionalmente las páginas web se han dividido en dos categorías: estáticas y dinámicas. Hemos leído muchas veces que con <a href="es/XHTML">XHTML</a> y <a href="es/CSS">CSS</a> se pueden crear documentos de calidad, pero estos serán fijos, estáticos. Si quieres que tus páginas se adapten y cambien según las acciones del usuario, si quieres dinamismo, necesitas javascript o similares... Ya no.
</p><p>Si teniamos <a href="es/DHTML">DHTML</a> (html dinámico), ahora tenemos <b>CDSS</b> (Css Dinámico Sin Scripts). No lo busquéis en Google, me lo acabo de inventar. Como en un cuento en el que un humilde sapo acaba siendo el príncipe de la historia, unas modestas pseudo-clases pueden acabar siendo las estrellas de la Web. Las <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#q15">pseudo-clases</a> en principio nacieron para darle dinamismo a los enlaces, y este es el uso que se les ha dado durante los últimos años. Es raro el archivo CSS que no incluya unas lineas semejantes a estas:
</p>
<pre>a:link { ... }
a:active { ... } 
a:visited { ... }
</pre>
<p>¡Pero la situación ha cambiado! Ahora podemos aplicarle pseudo-clases a la mayoría de los elementos, y jugando con los selectores podemos crear documentos dinámicos usando exclusivamente CSS.
</p>
<h3 name="Poco_a_poco"> Poco a poco </h3>
<p>Lo veremos poco a poco y por medio de ejemplos, centrándomos en la pseudo-clase :hover. Obviamente combinando diversas pseudo-clases pueden obtenerse efectos más complejos.
</p><p>Empecemos por el uso tradicional:
</p>
<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
&lt;style type='text/css'&gt;

a:hover { color: red; }

&lt;/style&gt;

&lt;p&gt;Párrafo con &lt;a&gt;enlace&lt;/a&gt; que se pone rojo&lt;/p&gt;
</pre>
<p>Soltamos amarras, levamos 'anclas' y...
</p>
<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
&lt;style type='text/css'&gt;

p:hover { color: red; font-variant: small-caps; }
li:hover { color: blue; background: silver; }  
div:hover { color: orange; text-align: right; }

&lt;/style&gt;

&lt;p&gt;Párrafo que se pone rojo y mayúsculo&lt;/p&gt;
&lt;ul&gt; &lt;li&gt;Item que se pone azul y con fondo gris&lt;/li&gt; &lt;/ul&gt;
&lt;div&gt;División con texto que se flota a la derecha y se pone naranja&lt;/div&gt; 
</pre> 
<p>Esto nos permite crear con facilidad efectos dinámicos, podemos cambiar la visualización de las cosas dependiendo de los actos del usuario. Con un poco de imaginación y buen gusto se pueden hacer maravillas.
</p>
<h4 name="La_cosa_da_mucho_juego"> La cosa da mucho juego </h4>
<p>Podemos cambiar cualquier propiedad, pero no todas son igual de útiles a la hora de crear dinamismo. Algunas de las más interesantes serían por ejemplo: display, position, z-index...
</p>
<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
&lt;style type='text/css'&gt;

.comun { position: absolute; width: 10em; 
	 padding: 2em; text-align: center; }

#rojo { background-color: red;
        left: 1em; top: 1em; 
        z-index: 1; }

#azul { background-color: blue;
        left: 5em; top: 5em; 
        z-index: 2; }

#naranja { background-color: orange;
           left: 9em; top: 2em; 
           z-index: 3; }

#rojo:hover,
#azul:hover,
#naranja:hover { z-index: 4; }

&lt;/style&gt;

&lt;p id='rojo'    class='comun'&gt;El rojo es vivo&lt;/p&gt;
&lt;p id='azul'    class='comun'&gt;El azul es elegante&lt;/p&gt;
&lt;p id='naranja' class='comun'&gt;El naranja es guay&lt;/p&gt;
</pre>
<h3 name="Pero_esto_no_es_todo.2C_a.C3.BAn_hay_m.C3.A1s."> Pero esto no es todo, aún hay más. </h3>
<p>Jugando con los <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/css/selector.html">selectores</a> podemos relacionar unos elementos con otros.
</p><p>Por ejemplo: al posicionarnos sobre <a href="es/HTML/Elemento/p">p</a> cambiamos las propiedades de <a href="es/HTML/Elemento/a">a</a>, y al posicionarnos sobre <a href="es/HTML/Elemento/a">a</a> cambiamos las propiedades de  <a href="es/HTML/Elemento/em">em</a>.
</p>
<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
&lt;style type='text/css'&gt;

em { display: none; }

p:hover a { color: red; }
a:hover em { display: inline; }

&lt;/style&gt;

&lt;p&gt;Párrafo &lt;a&gt;con enlace &lt;em&gt;que se pone rojo&lt;/em&gt; &lt;/a&gt; &lt;/p&gt;
</pre>
<p>También se pueden cambiar simultaneamente las propiedades de múltiples elementos. Basta con reiterar las declaraciones:
</p>
<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
&lt;style type='text/css'&gt;

p:hover em { text-decoration: underline;}
p:hover strong { text-transform: uppercase;}

&lt;/style&gt;

&lt;p&gt;Hay cosas &lt;em&gt;importantes&lt;/em&gt; y otras &lt;strong&gt;muy importantes&lt;/strong&gt; &lt;/p&gt;
</pre>
<p>Bueno, despues de unos ejemplos simples, uno un poco más complejo:
</p>
<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
&lt;style type='text/css'&gt; 

.editorial { width: 30%;} 
.item { list-style: none; list-style-position: inside; 
        padding: 0.2ex; margin: 0.2ex; } 

a { color: darkblue; text-decoration: none;} 
div:hover a { color: blue; text-decoration: underline;} 

.oculto ul { display: none; } 
div:hover ul { display: block; }

ul { border: transparent solid 0.1ex; } 
ul:hover { border: peru solid 0.1ex; } 

ul:hover abbr,
ul:hover dfn { color: red; } 
 
.vista { visibility: hidden; } 
ul:hover .vista { visibility: visible; } 

&lt;/style&gt; 

&lt;div class='editorial oculto'&gt; 
   &lt;h2&gt; &lt;a&gt; HTML &lt;/a&gt; &lt;/h2&gt; 
   &lt;ul class='item'&gt; 
      &lt;li&gt; &lt;dfn&gt;HTML&lt;/dfn&gt; es un lenguaje para el marcado de hipertextos.&lt;/li&gt; 
      &lt;li&gt;Es un estándar del &lt;abbr&gt;W3C&lt;/abbr&gt;. &lt;/li&gt; 
      &lt;li class='vista'&gt;Creado por Tim Berners-Lee.&lt;/li&gt; 
   &lt;/ul&gt; 
&lt;/div&gt; 

&lt;div class='editorial'&gt; 
   &lt;h2&gt; &lt;a&gt; CSS &lt;/a&gt; &lt;/h2&gt; 
   &lt;ul class='item'&gt; 
      &lt;li&gt; &lt;dfn&gt;CSS&lt;/dfn&gt; es una c seguida de dos eses.&lt;/li&gt; 
      &lt;li&gt;También es un estándar del &lt;abbr&gt;W3C&lt;/abbr&gt;. &lt;/li&gt; 
      &lt;li class='vista'&gt;No sé me ocurre qué poner aquí.&lt;/li&gt;
   &lt;/ul&gt; 
&lt;/div&gt;  
</pre>
<h4 name="Tipos_de_relaciones_.27familiares.27"> Tipos de relaciones 'familiares'</h4>
<p>Hasta el momento todos los ejemplos muestran relaciones padre → descendiente, si has leído los enlaces que puse sabrás que no son las únicas, las posibilidades son las siguientes:
</p>
<h5 name="Padre_.E2.86.92_hijo"> Padre → hijo </h5>
<p>Esta relación se expresa por medio del combinador ("&gt;"), relaciona un elemento con sus descendientes directos. En el siguiente ejemplo seleccionamos los elementos con clase 'subrayado' que sean hijos directos de body
</p>
<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
&lt;style type='text/css'&gt;

body:hover &gt; .subrayado { text-decoration: underline;}

&lt;/style&gt;

&lt;p&gt; Lo siguiente es una  
 &lt;span class='subrayado'&gt;cita&lt;/span&gt;: 
&lt;/p&gt;
&lt;hr&gt;
&lt;blockquote class='subrayado'&gt; Si buscas resultados distintos, no hagas siempre lo mismo.  
 &lt;cite&gt;Einstein&lt;/cite&gt; 
&lt;/blockquote&gt;
</pre>
<h5 name="Padre_.E2.86.92_descendiente"> Padre → descendiente </h5>
<p>Esta relación se expresa por medio de un espacio en blanco (" ") relaciona un elemento con un descendiente. Este es el método más flexible, puedes seleccionar cualquier elemento independientemente del parentesco exacto.
</p>
<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
&lt;style type='text/css'&gt;

     p:hover em { visibility: hidden;}

&lt;/style&gt;

&lt;h2&gt; Selección de descendientes&lt;/h2&gt;
&lt;p&gt; 
  &lt;em&gt;Este em es hijo de un párrafo&lt;/em&gt; 
  &lt;span&gt; span tambien, pero...
     &lt;em&gt;Este em no es hijo de un párrafo, &lt;/em&gt; 
     aunque sí descendiente (hijo de un hijo).
  &lt;/span&gt; 
&lt;/p&gt;
</pre>
<h5 name="Hermano_.E2.86.92_hermano_.28adyacente.29"> Hermano → hermano (adyacente) </h5>
<p>Esta relación es expresa por medio del combinador ("+"), relaciona un elemento con su hermano adyacente (el inmediatamente siquiente). Este es el método aparentemente más limitado, pero el que abre más puertas.
</p>
<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
&lt;style type='text/css'&gt;

#primero + li { list-style-type: none; }

&lt;/style&gt;

&lt;ul&gt;
  &lt;li id='primero'&gt;item 1&lt;/li&gt;
  &lt;li&gt;item 2&lt;/li&gt;
  &lt;li&gt;item 3&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p><br>
Esto de relacionar hermanos está muy bien, pero solo se puede seleccionar el adyacente, esto es una limitación importante, pero bueno, siempre puedes seleccionar el adyacente del adyacente, o el...
</p>
<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
&lt;style type='text/css'&gt;

#primero + li + li + li { list-style-type: none; }

&lt;/style&gt;

&lt;ul&gt;
  &lt;li id='primero'&gt;item 1&lt;/li&gt;
  &lt;li&gt;item 2&lt;/li&gt;
  &lt;li&gt;item 3&lt;/li&gt;
  &lt;li&gt;item 4&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h5 name="Otros_parentescos"> Otros parentescos </h5>
<p>Padres, hijos y hermanos no son las únicas relaciones dentro de una familia. ¿Qué pasa si quiero seleccionar un nieto, o un sobrino? ¿Se puede? 
</p>
<dl><dt> Seleccionando un nieto
</dt><dd> No tiene mayor complicación, al fin y al cabo un nieto no es más que un hijo de un hijo.
</dd></dl>
<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
&lt;style type='text/css'&gt;

p:hover &gt; span &gt; em { color: red; }

&lt;/style&gt;

&lt;p&gt; 
 &lt;em&gt;este em es hijo de un párrafo&lt;/em&gt; 
 &lt;span&gt; span también, pero...
   &lt;em&gt;este em es nieto&lt;/em&gt; &lt;/span&gt; 
&lt;/p&gt;
</pre>
<dl><dt> Seleccionando un sobrino.
</dt><dd> No hay problema, un sobrino no es más que un hijo de un hermano.
</dd></dl>
<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
&lt;style type='text/css'&gt;

p:hover + div &gt; em { color: red; }

&lt;/style&gt;

&lt;p&gt;Al ponerte sobre este párrafo&lt;/p&gt; 
&lt;div&gt; Cambias las propiedades de 
   &lt;em&gt;este em&lt;/em&gt; 
&lt;/div&gt;
</pre>
<h5 name="Limitaciones"> Limitaciones </h5>
<p>De los ejemplos anteriores se desprende que es muy facil abarcar todas las combinaciones posibles. Siempre y cuando la secuencia de los selectores sea:
</p>
<ol><li>Descendente - Un elemento y sus descendientes.
</li><li>Horizontal - Un elemento y sus hermanos.
</li><li>Mixta - Un elemento y los descendientes de sus hermanos.
</li></ol>
<p>Lo que no se puede hacer es seleccionar un ascendiente (ej. un padre). Por lo tanto <u>el siquiente ejemplo ni funciona ni debe hacerlo</u>:
</p>
<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
&lt;style type='text/css'&gt;

em:hover #div { color: red; }

&lt;/style&gt;

&lt;h1&gt;Este ejemplo ni funciona ni debe hacerlo.&lt;/h1&gt; 

&lt;div id='div'&gt; 
   &lt;em&gt;Este em&lt;/em&gt; 
   no puede cambiar las propiedades de su padre.
&lt;/div&gt;
</pre>
<h3 name="Llamemos_a_las_cosas_por_su_nombre.2C_y_orden.C3.A9moslas_seg.C3.BAn_su_clase"> Llamemos a las cosas por su nombre, y ordenémoslas según su clase </h3>
<p>Por supuesto, las relaciones pueden asignarse mediante class e id. 
</p><p>Seleccionemos los elementos de la clase 'especial' que sean descendientes de #este-elemento en el caso de que sea descendiente de #ul
</p>
<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
&lt;style type='text/css'&gt;

#ul:hover #este-elemento .especial { color: red; }

&lt;/style&gt;

&lt;ul id='ul'&gt;

  &lt;li id='este-elemento'&gt;
    &lt;ul&gt;
      &lt;li class='especial'&gt;item especial&lt;/li&gt;
      &lt;li&gt;item corriente&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;

  &lt;li class='especial'&gt;item especial, pero...&lt;/li&gt;

&lt;/ul&gt;
</pre>
<p>Solo hay una curiosa limitación ¿será un bug? Un selector compuesto puede empezar por un elemento o por un #id con :hover, Pero no puede empezar por una clase con :hover. Sorprendentemente con el selector universal (*) tampoco funciona.
</p>
<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
&lt;style type='text/css'&gt;

* { color: red; }

  .uno       .cero { color: blue; }      /* esto sí funciona */
 *.uno       .cerocero { color: blue; }  /* esto sí funciona */

  #uno:hover .dos { color: blue; }       /* esto sí funciona */
ul.uno:hover .cuatro { color: blue; }    /* esto sí funciona */

  .uno:hover .tres { color: blue; }      /* esto NO funciona */
 *.uno:hover .cinco { color: blue; }     /* esto TAMPOCO funciona */

&lt;/style&gt;

&lt;div class='uno'&gt;
  .uno       .cero { color: blue; }
  &lt;em class='cero'&gt;Esto sí funciona,&lt;/em&gt; y... &lt;br&gt;
  *.uno       .cerocero { color: blue; }
  &lt;em class='cerocero'&gt;esto también funciona.&lt;/em&gt; 
&lt;/div&gt;

&lt;ul id='uno' class='uno'&gt;
  &lt;li class='dos'&gt;#uno:hover .dos - esto sí funciona.&lt;/li&gt;
  &lt;li class='tres'&gt;.uno:hover .tres - esto NO funciona.&lt;/li&gt;
  &lt;li class='cuatro'&gt;ul.uno:hover .cuatro - esto sí funciona.&lt;/li&gt;
  &lt;li class='cinco'&gt;*.uno:hover .cinco - esto TAMPOCO funciona.&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3 name="Navegadores_que_lo_soportan"> Navegadores que lo soportan </h3>
<p>Los navegadores pueden dividirse en dos grupos: IE y el resto.
</p>
<ul><li> <b>IE</b>: IE6 no lo soporta, pero IE7 sí, aunque parece que solo parcialmente... (probado en IE7 beta)
</li><li> <b>El resto</b>: Cada día son más los navegadores que soportan este uso de las pseudo-clases:
<ul><li> Firefox 1.5 - si lo soporta (al igual que todos los navegadores basados en las últimas versiones de Gecko)
</li><li> Opera (pendiente de confirmación plena)
</li><li> Konqueror/Safari - (pendiente de confirmación plena)(al igual que todos los navegadores basados en las últimas versiones de KHTML)
</li></ul>
</li></ul>
<h3 name="Referencia"> Referencia </h3>
<p>Lo cierto es que no hay mucho escrito sobre el tema, (en castellano casi nada, o nada), la gente solo suele escribir sobre las cosas que funcionan en IE. <span class="comment">(Buscar un par de enlaces interesantes para ponerlos aquí)</span>
</p><p>Pero tampoco hace mucha falta. Todo lo que necesitamos está en <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/css/cover.html#minitoc">el estándar CSS-2</a>. además 'curiosamente' los dos pilares que sostienen esta funcionalidad (pseudoclases y selectores), están explicados en la misma página: <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/css/selector.html">El capítulo 5</a>.
</p><p>Recomiendo encarecidamente la lectura completa y atenta de todo el capítulo, y ya puestos de toda la especificación. Aunque para el asunto que nos ocupa nos interesan principamente:
</p>
<dl><dd>Sobre los selectores por parentesco, sub-capítulos: 5.5, 5.6, 5.7
</dd><dd>Sobre las pseudo-clases, sub-capítulo: 5.11,
</dd></dl>
<h3 name="CSS-3"> CSS-3 </h3>
<p>Todo lo explicado es conforme a CSS-2.1 ¿Qué nos depara el futuro? Si los pilares de esta técnica son las pseudo-clases y los selectores, <a class="external" href="http://www.w3.org/Style/CSS/current-work">CSS-3</a> traerá muchas más <a class="external" href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#pseudo-classes">pseudo-clases</a> y muchos más <a class="external" href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#selectors">selectores</a>. En definitiva, muchas más posibilidades de hacer cosas interesantes.
</p><p>Por ejemplo, hemos visto las limitaciones de CSS-2 para seleccionar hermanos, con CSS-3 esta limitación desaparece. Lo siguiente es CSS-3 pero funciona (usando el navegador apropiado).
</p>
<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
&lt;style type='text/css'&gt;

.gracias { visibility: hidden; }

#primero:hover + .gracias { visibility: visible; }
#primero:hover ~ * span { color: red; } /* esto:'~' es CSS-3 */

&lt;/style&gt;

&lt;ul&gt;
  &lt;li id='primero'&gt;Por favor, ponga el cursor encima de esta frase.&lt;/li&gt;
  &lt;li class='gracias'&gt;Le doy las gracias con CSS-2.1&lt;/li&gt;
  &lt;li&gt;Item normal y corriente&lt;/li&gt;
  &lt;li&gt;El futuro: &lt;span&gt;span en rojo gracias a CSS-3&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3 name="Notas_finales"> Notas finales </h3>
<p>Sí, ya sé que con <a href="es/JavaScript">JavaScript</a> o php pueden hacerse cosas mucho más avanzadas, pero aquí está la gracia del artículo, que sin necesidad de Javascript o php, solo con CSS, puede añadírsele mucho dinamismo a las páginas web.
</p><p>Este artículo es solo una introducción al tema, por razones didácticas los ejemplos son premeditadamente simples y limitados a una sola pseudo-clase (:hover). Puede que en el futuro exista un <a href="es/CSS_Din%c3%a1mico_II">CSS Dinámico II</a> que profundice más en el tema, muestre el uso de otras pseudo-clases y ejemplos más complejos.
</p><p><span class="comment">Categorías</span>
</p>
Revertir a esta revisión