W3C home > Mailing lists > Public > www-style@w3.org > May 2008

Re: [Bulk] Re: [BECS] CSSS! - CSS script

From: Pascal Germroth <pascal@germroth.name>
Date: Fri, 09 May 2008 16:33:30 +0200
Message-ID: <482460BA.2020608@germroth.name>
To: www-style <www-style@w3.org>


> Alan Gresley wrote:
>> Andrew Fedoniouk wrote:
>> [...]
>>> <style>
>>>    [for]
>>>    {
>>>      when-hover-on: $1(#< self.for >).highlight = true;
>>>      when-hover-off: $1(#< self.for >).highlight = null;
>>>      when-active-on: $1(#< self.for >).set-focus();
>>>      cursor:pointer;
>>>    }
>>>    input[highlight]
>>>    {
>>>      outline: 4px glow blue 1px;
>>>    }
>>> </style>
>> Some of that can be done with CSS2 selectors. There has be plenty of 
>> recent discussion on this list about selectors (for transition states) 
>> like :initial and :alternative without introducing any other language.
> "Some" of what can be done exactly?  Could you provide an example of how 
> you would do such binding (<label for="id">) with use of selectors? 
> Existing or any hypothetical ones - it does not matter.

Well if there were XPath-like predicates, one could do something like this:

label[for = attr(id, :root *:focus)] { color: red; }

where attr( name, sel ) would return the value of the attribute of the 
element matched by the selector, if multiple elements are matched, the 
expression would be evaluated for every value, for example, if it would 
be possible to focus two elements with IDs "foo" and "bar", behaviour 
would be the same as this:

label[for=foo], label[for=bar] { color: red; }

A set of functions that would return the content of elements targeted by 
a given selector would be great, for example to repeat the content of 
<cite> after a <blockquote>:

blockquote::after { content: 'by ' text( cite ); }

Or, more interactive:

#status-bar { content: attr( title, :root a:hover ) }
To show the title of the currently hovered link somewhere, etc.

And, I don't know the current status of this, but a 
"descendant"-selector would be quite migthy:

label:with-child( input:focus ) { color: red }

if the code looks like this: <label><input /> description</label>

I think this could be quite sufficient for many use-cases where 
scripting is used to just change CSS properties...

Pascal Germroth
Received on Friday, 9 May 2008 14:34:21 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:36 UTC