[whatwg] Selectors within <style scoped>
Roland Steiner
rolandsteiner at google.com
Tue Sep 20 00:35:32 PDT 2011
On Thu, Sep 15, 2011 at 9:55 AM, Ian Hickson <ian at hixie.ch> wrote:
> [...]
However, as easy as that appears at first blush, I fear it would be seem
> quite magical to authors who have trouble enough understanding CSS as it
> is. Consider:
>
> <aside>
> <section>
> <style scoped>
> aside section h1 { ... } /* matches nothing */
> aside section:scope h1 { ... } /* matches h1 below */
> </style>
> <h1>Example</h1>
> ...
> </section>
> </aside>
>
> Never before in CSS has making a selector more specific actually increased
> the number of elements it can match.
That is a very good point!
With :root doing the magic, you're really using :root as an @-rule; you
> might as well at that point actually do so:
>
> <style scoped>
> section > h1 { border-bottom: solid; }
> @global body.homepage h1 { color: red; }
> @global body.archive h1 { color: gray; }
> </style>
>
> This does have the advantage of meaning there's no magic. Where do
> implementors stand on this? Are @rules an acceptable solution? (If so,
> we'd want to pass it by the CSSWG first.)
>
On first glance (without having looked at code and potential interactions of
@-rules) "@global" really seems much nicer, esp. for the above given reason.
It's also visually easier to parse, IMHO.
It would also make a nice parallel with the proposed queryScopedSelector
when explaining all of this to authors: @global -> querySelector, no @global
-> queryScopedSelector.
- Roland
More information about the whatwg
mailing list