[selectors4] feedback

Hello,

I have a suggestion for the "Reference" syntax.  (I have been reviewing this
document <http://dev.w3.org/csswg/selectors4/#idref-combinators>.)

The current proposal gives this example:

label:matches(:hover, :focus) /for/ input { }


I basically read that as:

*When label is focused or hovered, select input with id inside label's
> attribute for.*


I see some things which could be improved with that syntax:

1. The attribute (in the example: *for*) is required to point to *only* an
id.  I do realize the *for* attribute is designed to bind a label to an
input by id.  (*I'm also assuming that references are intended for more
than labels and inputs, although maybe I'm very mistaken and if that is the
case feel free to stop reading this email!*)  The problem I have is that it
limits use of references.  For example, what if we wanted to store a
*class*name in an attribute and use that instead of id?  For instance,
<div
data-someclass='foo'>*hover this...*</div>  <div class='foo'>*...to select
this*</div>

2. It is somewhat non-intuitive as to where the reference (*for*) applies
to the second selector (*input*).  If we use a more complex example we can
see this more clearly:

> label:matches(:hover, :focus) /for/ .foo input { }

Does the *for*'s id apply to the .foo or to the input?  I imagine it is
meant to always apply to the *final* simple selector (*input*), even though
reading from left-to-right the /for/ is next to .foo.  This makes it
somewhat non-intuitive.  It also removes the *possibility* of attaching the
id to the first simple selector (*.foo*).

3. The *for* isn't wrapped in the attribute combinators, *[* and *]*.  That
makes it *slightly* harder to recognize it as an attribute.


An alternate syntax, for example this:

label:matches(:hover, :focus) /input#[for]/ { }  /** I feel this would
> address the issues I gave above */*


label:matches(:hover, :focus) /input#[data-foo]/ { }  /* *uses the value of
> attribute 'data-foo' to reference an id */*


label:matches(:hover, :focus) /input.[data-foo]/ { }  /* *uses the value of
> attribute 'data-foo' to reference a class */*


label:matches(:hover, :focus) /body #foo .bar div.[data-foo] .foo p div
> span .bar/ { }  /** allows reference to be anywhere in the second
> compound selector */*


Which can be expressed as:

*When label is focused or hovered, select *body #foo .bar div.[data-foo] .foo
> p div span .bar* with string inside label's attribute data-foo.*


Perhaps this functionality goes way beyond the scope of what is meant to be
accomplished, because references could end up being used in highly
complex/CPU expensive ways.  I suppose when I read the proposal, the though
of something like :parent came to mind.  Although if this is really only
meant for label & input pairs, my suggestions above aren't useful.


-Gavin