- From: James Craig <jcraig@apple.com>
- Date: Wed, 03 Jul 2013 17:07:57 -0700
- To: www-style@w3.org
- Message-id: <ACAAD9BD-531D-447F-8FF0-61E29CB6385E@apple.com>
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