[whatwg] Selectors within <style scoped>

[Lachlan Hunt]

On 2011-06-15 08:40, Roland Steiner wrote:
> According to the HMTL5 spec, selectors are not limited to children of the
> scoping element (the parent element of<style scoped>). For example:
>
> <div class="foo">
>      <div>
>          <style scoped>
>              .foo p { display: none }
>          </style>
>          <p>To be or not to be, that is the question.</p>
>      </div>
> <div>
>
> In above snippet, the selector in the scoped stylesheet would match, causing
> the<p>  element to be hidden...
>
> The disadvantages:
>
> 1.) a scoped style may unexpectedly apply, because an arbitrary ancestor of
> the scoping element happens to partially match the scoped selector

This is the purpose of the :scope pseudo-class that is defined to match 
the contextual reference elemnt, which for scoped stylesheets, will be 
the parent of the style element.

So you could rewrite the style above to be:

:scope .foo p { display: none }

Then .foo will only match elements within the div.

http://dev.w3.org/2006/webapi/selectors-api2/#the-scope-pseudo-class

-- 
Lachlan Hunt - Opera Software
http://lachy.id.au/
http://www.opera.com/