Programmable state-machines in CSS proposal

Hi,

A problem I've been dealing with in design is that the pseudo-class selector :hover signals a state of an element, and that element is the only object that style can be applied to.

For example, i can only affect the element that :hover applies to:

#myImage {
 color: #000000 ;
}

 #myImage:hover {
 color: #fffff;
}


I can't apply it to affect another completely separate element:

#myImage -->  #myOtherImage {
 color: #000000 ;
}
#myImage:hover -->  #myOtherImage {
 color: #fffff;
}

I would need to Javascript for this to happen.

This leads me to think that :hover should be a state definition instead of a pseudo-class.  Which leads me to think that CSS should include state definitions in general.

So, what's everyone's thoughts on separating state from style element, and implementing a programmable state machine as part of CSS?  (I have a hardware background so I speak in terms of state machines..)

A lot of jQuery scripts are based around elements affecting other elements, for example, interactive elements that affect style of other elements like scrollbars, graphs, buttons, etc..

Being able to measure state of one element and have it affect another element would be tremendously useful in reducing all this jQuery scripting.  Having CSS implement a state machine as part of its syntax would pretty much make it programmable.  The state machine would test not just for :hover pseudo-class, but for any CSS property, or each element could define its own properties.  This really needs programmable variables for it to work.
 
As a rough guideline start (that's very broken), the syntax would be along the lines of:

 [element] { condition } --> [element] { newProperty } 

The :hover pseudo-class should be a state property instead, and the above example should actually be:

#myImage { mouse != hover } --> #myOtherImage { 
 color: #000000 ;
}
#myImage { mouse == hover } --> #myOtherImage { 
 color: #fffff;
}

Couple of other examples:

- Click on/off

#myImage{ mouse == click } && #myOtherImage{ visibility == visible } --> #myOtherImage { 
  visibility:hidden;
}
#myImage { mouse == click} && #myOtherImage { visibility == hidden } --> #myOtherImage { 
 visibility:visible;
}

- Animation  (assuming some default timer)

#myImage { opacity < 1 } --> #myImage { 
  opacity: #myImage{opacity} + .01;
} 

Anyways, a programmable CSS system is needed, as I fear Javascript is too slow & power inefficient to handle complex interaction with high frame rates for upcoming high complexity app-sites.  I could do everything with Javascript/Jquery, but frame rates would be much slower while consuming more power than if the browser could be programmed through CSS.

-bobby
---
Bobby Mozumder
Editor-in-Chief
FutureClaw Magazine
mozumder@futureclaw.com
1-240-745-5287
www.futureclaw.com
www.twitter.com/futureclaw