[selectors4] hash reference, reverse reference, and multi-reference combinators

Related to reference combinators:
http://dev.w3.org/csswg/selectors4/#idref-combinators

It's clear from the spec you can use this for IDREF from an element to the selector's subject:

  label:matches(:hover) /for/ input { ... }

It's not clear if you can use this for in-page hash references matching #name or #id. For example, should this work?

  /* highlight the target of the in-page link via href="#foo" */
  a:matches(:hover, :focus) /href/ * { ... }

It's also not clear what the recommended way to denote *reverse* reference combinators would be. For context, some ARIA attributes, including @aria-labelledby and @aria-describedby are effectively the reverse relationship of attributes like @for, @href, and @aria-controls. 

Is the recommendation to use the selector subject override (!)?
http://dev.w3.org/csswg/selectors4/#subject

  /* highlight the custom checkbox when hovering over its label */
  ![role="checkbox"] /aria-labelledby/ *:matches(:hover) {  } 

Or should we consider a *reverse* reference combinator.

  /* Admittedly the backslashes here may be problematic. */
  *:matches(:hover) \aria-labelledby\ [role="checkbox"] { ... } 

  /* Other possibilities */
  foo %attr% bar { ... } 
  foo //attr// bar { ... } 
  foo /<=attr/ bar { ... } 

Another thing to consider is that some attributes can contain multiple IDREFS (aria-describedby="foo bar") and if NAMEREF is allowed to match in addition to IDREF, a single combinator could match multiple elements, such as a set of radio buttons.

One potentially solution is to be more explicit about the order and the expected attribute on both sides. 

  label /for=>id/ input { … }
  * /id<=aria-labelledby/ [role="checkbox"] { … }

This isn't terribly readable, but might allow this pattern to be used more generally than just for IDREFs.

  <div class="example" data-highlight="text">highlight all text fields</div>
  <input type="text">

  div.example:matches(:hover) /data-highlight=>type/ input {
    background-color: yellow;
  }

Thanks in advance,
James

PS. Apologies for the rich text email, but hopefully selector highlighting makes it a little bit easier to understand.

Received on Thursday, 4 July 2013 00:08:35 UTC