Las últimas semanas he estado trabajando muchísimo con CSS, Javascript (con Jquery) y XHTML. En el camino me he preguntado si hay formas de realizar ciertas cosas de manera declarativa, es decir, solo escribiendo lo que se debería hacer, sin dar una explicación de cómo hacerlo.
En particular, lo que intenté hacer es mostrar un párrafo (modificador p) cuando el usuario se posiciona en un link (modificador a:hover), en un html como el siguiente:
<div id="#example">
<a href="#">show paragraph</a>
<p>This paragraph must be shown
when the link is in focus</p>
</div>
Lo usual hubiese sido escribir un pequeño codigo en Javascript (Jquery) como el siguiente:
$('#link').focus(function() {
$('#paragraph').show();
});
$('#link').unfocus(function() {
$('#paragraph').hide();
});
En el afán de hacerlo declarativo, logré deducir el siguiente estilo usando CSS 2, obteniendo exactamente el mismo comportamiento:
#example p { display:none; }
#example a:hover + p { display: block; }
La magia está en el selector “+”, (disponible en CSS 2) que permite modificar el estilo de un selector hermano inmediatamente después de otro selector. Por ejemplo, en este caso permite editar el selector p que es hermano del selector a:hover. El truco está en que el selector a:hover está disponible solo cuando el link está en foco 
.
El resultado es el siguiente:
This paragraph must be shown when the link is in focus
Buen truco