Binding the view with the model in the Model-View-Conroller pattern is a common problem for programming interactive graphical user-interfaces. Every programming language seems to have its own solution for reactivity. For a long time the observer pattern which is based on the publish/subscribe principle has been the status quo. Flex has some kind of binding feature and JavaFX uses data flow dependencies to trigger reactions between values.

Functional reactive programming (FRP) is based on signal processing and modelling continuous events. Flapjax, the JavaScript API, and also, scala.react the embedded DSL for Scala, have event streams as first class values. Meanwhile, Rx a.k.a Linq to events isn't FRP but has a novel take on duality between Observer and Iterator patterns which are coined as push (by producer) and pull (by consumer). See this.

The idea of FRP seems to be to convert a raw event stream, i.e values over time, into a dynamic behaviour, with dataflow dependencies to respond to events without resorting to the inversion of control - a.k.a - the observer pattern.

CSS 2.1 has dynamic pseudo-classes such as :hover, :active and :focus. These pseudo classes add a little reactivity to CSS.

A common pattern with JQuery/ JavaScript is binding the events from one DOM element to a dynamic behaviour of another DOM element. For example, this fragment of JQuery code binds the hover events received from on a source to a dynamic style on the target:

The effect is the target receives the dynamic class-style while the user hovers over the source. Here's an application of this pattern with a classical list menu - below on the left.

There isn't really a way to implement this menu with only CSS without JavaScript.

CSS seems to be already primed for this kind of binding, using the descendant selector. This is a common pattern in coding CSS menus and looks more or less like this:

The problem is that in the example menu above, the targets aren't descendants of the sources. But what about CSS 3.0 sibling selectors for adjacent and general siblings? The problem with that is targets that need to be selected occur before the sources in the document. The sibling selectors are limited to matching following elements and cannot match preceding siblings. The general sibling selector isn't general enough.

So okay, we already know CSS selectors do not have a parent or a previous-sibling selector, like XPath has the parent and previous-sibling axes. But, why not allow full connectivity between DOM nodes with CSS selectors when dynamic pseudo-classes are needed? CSS selectors are limited to forwards-only selection - that is - forwards in the document-order. This is great for stream processing the webpage in a single pass over the stream while the page is being loaded. But it is bad news for the needs of dynamic behaviour after the page has loaded.

CSS could be extended with new operators for the parent and previous sibling selectors without interfering too much with the existing syntax. Perhaps the symbols ^ and <- could be used for parent and previous sibling selectors, respectively. Then, to maintain fast page-loading times, these selectors are only effective after a dynamic pseudo-class has been applied. For example, something like this:

I think a worthwhile research idea is to design the core of a purely declarative language for CSS, which incorporates all the necessary features for GUI programming. Part of the problem is that the scope isn't yet well-defined, so a benchmark of lots of examples would help. Perhaps timed CCS could be a starting point for more reactive style sheets.