Nested and non-nested elements: pseudoclasses

It occurs to me that there is a potential 'flaw' in CSS in regards to the
:hover and other associated psuedoclasses.  The problem I've come accross is
non-nested elements not being capable of responding to other elements when,
per se, hovered.

Take the following example:

<p><a class="hovered" href="#">Hover me!</a></p>
<p>This is just some filler text to lead by my example.  What will follow is
another element (DIV) that should respond to the <a class="hovered"> element
when it's hovered over.</p>
<div class="responder">I should show and hide whenever the <a
class="hovered"> is hovered and non-hovered.</div>

Logically speaking, there should be a way to target an element *anywhere* on
a page using CSS psuedoclasses, such as

a.hovered:hover ~ div.responder { display: block; }
a.hovered ~ div.responder { display: none; }

Why is it that this is not possible?  As I understand it, CSS is supposed to
be a cross-platform, accessible replacement to JavaScript and DHTML.  Yet,
simple tasks as this are not possible as they should be.  *However*, it is
possible to apply the same logic to nested elements, but it still requires a
fair amount of CSS.

Anyway, this was just a thought.

Thanks,
Leon Sutton.

Received on Thursday, 19 August 2004 06:14:22 UTC