[selectors] Split out concepts of relative and scoped selectors, as they can be independently invoked.

Author: tabatkins

selectors/Overview.html

@@ -10,7 +10,7 @@
    rel=dcterms.rights>
   <meta content="Selectors Level 4" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-05-01 name=dcterms.date>
+  <meta content=2013-05-02 name=dcterms.date>
   <meta content="Elika J. Etemad" name=dcterms.creator>
   <meta content="Tab Atkins Jr." name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
@@ -31,13 +31,13 @@
 
    <h1 id=title>Selectors Level 4</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 May 2013</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 2 May 2013</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a href="http://dev.w3.org/csswg/selectors4/">
-     http://www.w3.org/TR/2013/ED-selectors4-20130501/</a>
+     http://www.w3.org/TR/2013/ED-selectors4-20130502/</a>
 
     <dt>Editor's draft:
 
@@ -204,23 +204,26 @@ <h2 class="no-num no-toc" id=contents>Table of Contents</h2>
 
      <li><a href="#scoping"><span class=secno>3.3. </span> Scoped
       Selectors</a>
+
+     <li><a href="#relative"><span class=secno>3.4. </span> Relative
+      Selectors</a>
       <ul class=toc>
-       <li><a href="#absolutizing"><span class=secno>3.3.1. </span>
+       <li><a href="#absolutizing"><span class=secno>3.4.1. </span>
         Absolutizing a Scope-relative Selector</a>
       </ul>
 
-     <li><a href="#pseudo-classes"><span class=secno>3.4. </span>
+     <li><a href="#pseudo-classes"><span class=secno>3.5. </span>
       Pseudo-classes</a>
 
-     <li><a href="#pseudo-elements"><span class=secno>3.5.
+     <li><a href="#pseudo-elements"><span class=secno>3.6.
       </span>Pseudo-elements</a>
 
-     <li><a href="#case-sensitive"><span class=secno>3.6. </span> Characters
+     <li><a href="#case-sensitive"><span class=secno>3.7. </span> Characters
       and case sensitivity</a>
 
-     <li><a href="#namespaces"><span class=secno>3.7. </span> Namespaces</a>
+     <li><a href="#namespaces"><span class=secno>3.8. </span> Namespaces</a>
 
-     <li><a href="#invalid"><span class=secno>3.8. </span> Invalid Selectors
+     <li><a href="#invalid"><span class=secno>3.9. </span> Invalid Selectors
       and Error Handling</a>
     </ul>
 
@@ -296,7 +299,7 @@ <h2 class="no-num no-toc" id=contents>Table of Contents</h2>
       target pseudo-class <code>:target</code></a>
 
      <li><a href="#the-scope-pseudo"><span class=secno>7.5. </span> The
-      contextual reference element pseudo-class <code>:scope</code></a>
+      reference element pseudo-class <code>:scope</code></a>
     </ul>
 
    <li><a href="#useraction-pseudos"><span class=secno>8. </span> User Action
@@ -825,7 +828,7 @@ <h2 id=overview><span class=secno>2. </span> Selectors Overview</h2>
     <tr>
      <td><code>E:scope</code>
 
-     <td>an E element being a designated contextual reference element
+     <td>an E element being a designated reference element
 
      <td><a href="#scope-pseudo">The scope pseudo-class</a>
 
@@ -1291,7 +1294,7 @@ <h3 id=subject><span class=secno>3.2. </span> Determining the Subject of a
    Selector</h3>
 
   <p>The elements of a document tree that are represented by a selector are
-   the <dfn id=subjects>subjects</dfn> of the selector.
+   the <dfn id=subjects title=subject>subjects</dfn> of the selector.
 
   <p>By default, the subjects of a selector are the elements represented by
    the last <a href="#compound"><i>compound selector</i></a> in the selector.
@@ -1331,76 +1334,82 @@ <h3 id=subject><span class=secno>3.2. </span> Determining the Subject of a
 
   <h3 id=scoping><span class=secno>3.3. </span> Scoped Selectors</h3>
 
-  <p>Some host applications may choose to <dfn id=scope>scope</dfn> selectors
-   to a particular subtree of the document. The root of the scoping subtree
-   is called the <dfn id=scoping-element>scoping element</dfn>, and is
-   in-scope. When scoped selectors are used, it forms the <a
-   href="#contextual-reference-element-set"><i>contextual reference element
-   set</i></a> and matches the <a
-   href="#scope-pseudo"><code>:scope</code></a> pseudo-class.
+  <p>Some host applications may choose to <dfn id=scope
+   title="scope | scoped selector">scope</dfn> selectors to a particular
+   subtree or fragment of the document. The root of the scoping subtree is
+   called the <dfn id=scoping-root>scoping root</dfn>, and may be either a
+   true element (the <dfn id=scoping-element>scoping element</dfn>) or a <dfn
+   id=virtual title="virtual scoping root">virtual</dfn> one (such as a
+   <code>DocumentFragment</code>).
 
-  <p>There are three methods of scoping selectors:
+  <p>There are two methods of scoping selectors:
 
   <dl>
    <dt><dfn id=scope-contained-selectors
     title="scope-contained | scope-contained selector">scope-contained
     selectors</dfn>
 
    <dd> With this method of scoping, selectors match as if the <a
-    href="#scoping-element"><i>scoping element</i></a> were the root of the
-    document: all <a href="#compound"><i>compound selectors</i></a> must
-    match elements within the scope. (The <a
+    href="#scoping-root"><i>scoping root</i></a> were the root of the
+    document: all <a href="#compound"><i>compound selectors</i></a> must be
+    represented within the scope. (The <a
     href="#roo-pseudo"><code>:root</code></a> pseudo-class, however, still
     only matches the actual root of the document.)
 
    <dt><dfn id=scope-filtered
     title="scope-filtered | scope-filtered selector">scope-filtered</dfn>
     selectors
 
-   <dd> With this method of scoping, a selector matches if the <i>subject</i>
-    of the selector is within the scope, even if other components of the
-    selector are outside the scope.
-
-   <dt><dfn id=scope-relative
-    title="scope-relative | scope-relative selector">scope-relative</dfn>
-    selectors
-
-   <dd> With this method of scoping, "<a
-    href="#scope-pseudo"><code>:scope</code></a> " (the <a
-    href="#scope-pseudo"><code>:scope</code></a> pseudo-class followed by a
-    space) is implied at the beginning of each <a href="#complex"><i>complex
-    selector</i></a> that does not already contain the <a
-    href="#scope-pseudo"><code>:scope</code></a> pseudo-class. This allows
-    the selector to begin syntactically with a <a
-    href="#combinator"><i>combinator</i></a>. The scoping element matches
-    this implied <a href="#scope-pseudo"><code>:scope</code></a> selector,
-    but does not limit which elements match.
-    <p> Scope-relative selectors must be <a
-     href="#absolutize">absolutized</a> before using them for matching.
-
-    <p class=issue> It might be necessary (for, e.g.
-     <code>::distributed()</code> or <code>documentFragment.find()</code>),
-     to split the concept of scope-relative selector into multiple concepts.
+   <dd> With this method of scoping, a selector matches if the <a
+    href="#subjects"><i>subject</i></a> of the selector is within the scope,
+    even if other components of the selector are outside the scope. (A <a
+    href="#scoping-element"><i>scoping element</i></a> is considered to be in
+    scope.)
   </dl>
 
   <div class=example>
    <p> For example, the <code>element.querySelector()</code> function defined
     in <a href="#SELECTORS-API2"
     rel=biblioentry>[SELECTORS-API2]<!--{{SELECTORS-API2}}--></a> allows the
     author to define a <a href="#scope-filtered"><i>scope-filtered</i></a>
-    selector, while the similar <code>element.find</code> function defined in
-    the same spec uses <a href="#scope-relative"><i>scope-relative</i></a>
-    selectors.
+    selector.
 
    <p> On the other hand, the selectors within an <a href="#HTML5"
     rel=biblioentry>[HTML5]<!--{{HTML5}}--></a> scoped stylesheet define <a
     href="#scope-contained-selectors"><i>scope-contained</i></a> selectors.
   </div>
 
-  <h4 id=absolutizing><span class=secno>3.3.1. </span> Absolutizing a
+  <p>Unless otherwise specified, the <a href="#scoping-root"><i>scoping
+   root</i></a> also forms the <a href="#reference-element-set"><i>reference
+   element set</i></a> and matches the <a
+   href="#scope-pseudo"><code>:scope</code></a> pseudo-class.
+
+  <h3 id=relative><span class=secno>3.4. </span> Relative Selectors</h3>
+
+  <p> Certain contexts may accept <dfn id=relative-selectors
+   title="relative selector | relative | scope-relative">relative
+   selectors</dfn>, which are a shorthand for selectors that represent
+   elements relative to a <i>reference element</i> (i.e. an element that
+   matches <a href="#scope-pseudo"><code>:scope</code></a>). In a <a
+   href="#relative-selectors"><i>relative selector</i></a>, “<a
+   href="#scope-pseudo"><code>:scope</code></a> ” (the <a
+   href="#scope-pseudo"><code>:scope</code></a> pseudo-class followed by a
+   space) is implied at the beginning of each <a href="#complex"><i>complex
+   selector</i></a> that does not already contain the <a
+   href="#scope-pseudo"><code>:scope</code></a> pseudo-class. This allows the
+   selector to begin syntactically with a <a
+   href="#combinator"><i>combinator</i></a>. However, it must be <a
+   href="#absolutize">absolutized</a> before matching.
+
+  <p> Relative selectors, once absolutized, can additionally be <a
+   href="#scope-contained-selectors"><i>scope-contained</i></a> (such as
+   within the <code>::distributed()</code> pseudo-class [[SHADOWDOM]]) or <a
+   href="#scope-filtered"><i>scope-filtered</i></a>.
+
+  <h4 id=absolutizing><span class=secno>3.4.1. </span> Absolutizing a
    Scope-relative Selector</h4>
 
-  <p> To <dfn id=absolutize>absolutize a scope-relative selector</dfn>:
+  <p> To <dfn id=absolutize>absolutize a relative selector</dfn>:
 
   <ol>
    <li> If the selector starts with a <a
@@ -1409,9 +1418,8 @@ <h4 id=absolutizing><span class=secno>3.3.1. </span> Absolutizing a
     <a href="#scope-pseudo"><code>:scope</code></a> as the initial <a
     href="#compound"><i>compound selector</i></a>.
 
-   <li> Otherwise, if the <a
-    href="#contextual-reference-element-set"><i>contextual reference element
-    set</i></a> is empty, the selector is already absolute.
+   <li> Otherwise, if the <a href="#reference-element-set"><i>reference
+    element set</i></a> is empty, the selector is already absolute.
 
    <li> Otherwise, if the selector does not contain any instance of the <a
     href="#scope-pseudo"><code>:scope</code></a> pseudo-class (either at the
@@ -1422,10 +1430,10 @@ <h4 id=absolutizing><span class=secno>3.3.1. </span> Absolutizing a
    <li> Otherwise, the selector is already absolute.
   </ol>
 
-  <p> To <dfn id=absolutize-list>absolutize a scope-relative selector
-   list</dfn>, absolutize each scope-relative selector in the list.
+  <p> To <dfn id=absolutize-list>absolutize a relative selector list</dfn>,
+   absolutize each relative selector in the list.
 
-  <h3 id=pseudo-classes><span class=secno>3.4. </span> Pseudo-classes</h3>
+  <h3 id=pseudo-classes><span class=secno>3.5. </span> Pseudo-classes</h3>
 
   <p>The <dfn id=pseudo-class>pseudo-class</dfn> concept is introduced to
    permit selection based on information that lies outside of the document
@@ -1463,7 +1471,7 @@ <h3 id=pseudo-classes><span class=secno>3.4. </span> Pseudo-classes</h3>
    tree. They do not appear in or modify the document source or document
    tree.
 
-  <h3 id=pseudo-elements><span class=secno>3.5. </span>Pseudo-elements</h3>
+  <h3 id=pseudo-elements><span class=secno>3.6. </span>Pseudo-elements</h3>
 
   <p><dfn id=pseudo-element title=pseudo-element>Pseudo-elements</dfn> create
    abstractions about the document tree beyond those specified by the
@@ -1547,7 +1555,7 @@ <h3 id=pseudo-elements><span class=secno>3.5. </span>Pseudo-elements</h3>
    defines the ::before, ::after, ::first-line and ::first-letter
    pseudo-elements.
 
-  <h3 id=case-sensitive><span class=secno>3.6. </span> Characters and case
+  <h3 id=case-sensitive><span class=secno>3.7. </span> Characters and case
    sensitivity</h3>
 
   <p>All Selectors syntax is case-insensitive within the ASCII range (i.e.
@@ -1578,7 +1586,7 @@ <h3 id=case-sensitive><span class=secno>3.6. </span> Characters and case
    combinator, but ‘<code class=css>#foo\>a</code>’ instead selects an
    element with the id <code>foo>a</code>.
 
-  <h3 id=namespaces><span class=secno>3.7. </span> Namespaces</h3>
+  <h3 id=namespaces><span class=secno>3.8. </span> Namespaces</h3>
 
   <p>Certain selectors support namespace prefixes. The mechanism by which
    namespace prefixes are <dfn id=nsdecl>declared</dfn> should be specified
@@ -1589,7 +1597,7 @@ <h3 id=namespaces><span class=secno>3.7. </span> Namespaces</h3>
    rule. <a href="#CSS3NAMESPACE"
    rel=biblioentry>[CSS3NAMESPACE]<!--{{!CSS3NAMESPACE}}--></a>
 
-  <h3 id=invalid><span class=secno>3.8. </span> Invalid Selectors and Error
+  <h3 id=invalid><span class=secno>3.9. </span> Invalid Selectors and Error
    Handling</h3>
 
   <p>User agents must observe the rules for handling <dfn
@@ -2578,30 +2586,35 @@ <h3 id=the-target-pseudo><span class=secno>7.4. </span> The target
     -->*:target::before { content : url(target.png) }</pre>
   </div>
 
-  <h3 id=the-scope-pseudo><span class=secno>7.5. </span> The contextual
-   reference element pseudo-class <a
-   href="#scope-pseudo"><code>:scope</code></a></h3>
+  <h3 id=the-scope-pseudo><span class=secno>7.5. </span> The reference
+   element pseudo-class <a href="#scope-pseudo"><code>:scope</code></a></h3>
 
   <p> The <dfn id=scope-pseudo>:scope</dfn> pseudo-class represents any
-   element that is in the <dfn id=contextual-reference-element-set>contextual
-   reference element set</dfn>. This is is a (potentially empty)
-   explicitly-specified set of elements, such as that specified by the
-   <code>querySelector()</code> call in <a href="#SELECTORS-API2"
+   element that is in the <dfn id=reference-element-set>reference element
+   set</dfn>. This is is a (potentially empty) set of elements that provide a
+   reference point for selectors to match against, such as that specified by
+   the <code>querySelector()</code> call in <a href="#SELECTORS-API2"
    rel=biblioentry>[SELECTORS-API2]<!--{{SELECTORS-API2}}--></a>, or the
    parent element of a <a
    href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-style-element">scoped
    <code>&lt;style></code> element</a> in <a href="#HTML5"
-   rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>, which is used to "scope" a
-   selector so that it only matches within a subtree.
+   rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>.
 
-  <p> If no contextual reference element set is given, <a
-   href="#scope-pseudo"><code>:scope</code></a> is equivalent to <a
-   href="#roo-pseudo"><code>:root</code></a>. Specifications intending for
+  <p> If the <a href="#reference-element-set"><i>reference element
+   set</i></a> is not explicitly specified, it defaults to representing the
+   <a href="#scoping-root"><i>scoping root</i></a> (if any), else represents
+   the root of the docoment (i.e. matches <a
+   href="#roo-pseudo"><code>:root</code></a>). Specifications intending for
    this pseudo-class to match specific elements rather than the document's
-   root element must define a <a
-   href="#contextual-reference-element-set"><i>contextual reference element
+   root element must define either a <a href="#scoping-root"><i>scoping
+   root</i></a> (if using <a href="#scope"><i>scoped selectors</i></a>) or an
+   explicit <a href="#reference-element-set"><i>reference element
    set</i></a>.
 
+  <p class=note> Note that since this pseudo-class only represents elements,
+   a virtual <a href="#scoping-root"><i>scoping root</i></a> cannot be the
+   subject of a selector; such a selector effectively represents nothing.
+
   <h2 id=useraction-pseudos><span class=secno>8. </span> User Action
    Pseudo-classes</h2>
 
@@ -4242,7 +4255,7 @@ <h2 id=grammar><span class=secno>16. </span><a id=formal-syntax></a>
 
    <dd> A <code>scope_relative_selector_list</code> production representing a
     <a href="#selector-list"><i>selector list</i></a> comprised of <a
-    href="#scope-relative"><i>scope-relative selectors</i></a>.
+    href="#relative-selectors"><i>relative selectors</i></a>.
 
    <dt><dfn id=ltcompound-selector><var>&lt;compound-selector></var></dfn>
 
@@ -4259,36 +4272,13 @@ <h2 id=grammar><span class=secno>16. </span><a id=formal-syntax></a>
   <h2 id=changes><span class=secno>17. </span> Changes</h2>
 
   <p>Significant changes since the <a
-   href="http://www.w3.org/TR/2012/WD-selectors4-20120823/">23 August 2012
+   href="http://www.w3.org/TR/2013/WD-selectors4-20130502/">2 MaY 2013
    Working Draft</a> include:
 
   <ul>
-   <li>Added <a href="#blank-pseudo"><code>:blank</code></a> and <a
-    href="#placeholder-shown-pseudo"><code>:placeholder-shown</code></a>
-    pseudo-classes.
-
-   <li>Released some restrictions on <a
-    href="#matches-pseudo"><code>:matches()</code></a> and <a
-    href="#negation-pseudo"><code>:not()</code></a>.
-
-   <li>Defined <a href="#fast-profile"><i>fast</i></a> and <a
-    href="#complete-profile"><i>complete</i></a> Selectors profiles.
-
-   <li>Improved definition of <a href="#specificity">specificity</a> to
-    better handle <a href="#matches-pseudo"><code>:matches()</code></a>.
-
-   <li>Updated grammar.
-
-   <li>Cleaned up definition of <a href="#anb0"><var>An+B</var></a> notation.
-
-   <li>Added definition of <a
-    href="#scope-relative"><i>scope-relative</i></a> selectors, changed
-    <i>scope-constrained</i> to <a
-    href="#scope-filtered"><i>scope-filtered</i></a> for less confusion with
-    <a href="#scope-contained-selectors"><i>scope-contained</i></a>.
-
-   <li>The <code>:local-link()</code> pseudo-class now ignores trailing
-    slashes.
+   <li>Split out <a href="#relative-selectors"><i>relative selectors</i></a>
+    from <a href="#scope"><i>scoped selectors</i></a>, as these are different
+    concepts that can be independently invoked.
   </ul>
 
   <h2 id=conformance><span class=secno>18. </span> Conformance</h2>