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

On Wed, Jul 3, 2013 at 5:07 PM, James Craig <jcraig@apple.com> wrote:
> 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/ * { ... }

Yes, it does.  The spec defines that the attribute has to contain
either an IDREF or an id selector, and an in-page link qualifies as
the latter (so long as it's just the hash).

> 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 { ... }

Use the subject indicator.  It's how you reverse any combinator.
There's no need to add reversed versions of anything.

> 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;
>   }

The host language is allowed to tweak the interpretation of the
attribute for the purposes of the reference combinator.  Your example
won't match by default, but HTML can define that it does.

~TJ

Received on Thursday, 4 July 2013 00:20:36 UTC