Reorder a couple sections, add :any() as :matches()

Author: fantasai

selectors4/Overview.html

@@ -138,17 +138,27 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
    <li><a href="#structure"><span class=secno>3. </span> Selector Syntax and
     Structure</a>
     <ul class=toc>
-     <li><a href="#namespaces"><span class=secno>3.1. </span> Namespaces</a>
-
-     <li><a href="#case-sensitive"><span class=secno>3.2. </span> Characters
+     <li><a href="#case-sensitive"><span class=secno>3.1. </span> Characters
       and case sensitivity</a>
 
+     <li><a href="#namespaces"><span class=secno>3.2. </span> Namespaces</a>
+
      <li><a href="#invalid"><span class=secno>3.3. </span> Invalid Selectors
       and Error Handling</a>
     </ul>
 
-   <li><a href="#grouping"><span class=secno>4. </span> Groups of
-    selectors</a>
+   <li><a href="#logical-combination"><span class=secno>4. </span> Logical
+    Combinations</a>
+    <ul class=toc>
+     <li><a href="#grouping"><span class=secno>4.1. </span> Groups of
+      selectors </a>
+
+     <li><a href="#matches"><span class=secno>4.2. </span> The Matches-Any
+      Psuedo-class: &lsquo;<code class=css>:matches()</code>&rsquo;</a>
+
+     <li><a href="#negation"><span class=secno>4.3. </span> The Negation
+      Pseudo-class: &lsquo;<code class=css>:not()</code>&rsquo;</a>
+    </ul>
 
    <li><a href="#elemental-selectors"><span class=secno>5. </span> Elemental
     selectors</a>
@@ -261,9 +271,6 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
        <li><a href="#empty-pseudo"><span class=secno>7.4.12. </span> :empty
         pseudo-class</a>
       </ul>
-
-     <li><a href="#negation"><span class=secno>7.5. </span> The negation
-      pseudo-class</a>
     </ul>
 
    <li><a href="#combinators"><span class=secno>8. </span> Combinators</a>
@@ -815,18 +822,7 @@ <h2 id=structure><span class=secno>3. </span> Selector Syntax and Structure</h2>
   <p>An empty selector, containing no compound selector, is an <a
    href="#invalid">invalid selector</a>.
 
-  <h3 id=namespaces><span class=secno>3.1. </span> Namespaces</h3>
-
-  <p>Certain selectors support namespace prefixes. The mechanism by which
-   namespace prefixes are <dfn id=declared>declared</dfn> should be specified
-   by the language that uses Selectors. If the language does not specify a
-   namespace prefix declaration mechanism, then no prefixes are declared. In
-   CSS, namespace prefixes are declared with the <a
-   href="http://www.w3.org/TR/css3-namespace/#declaration"><code>@namespace</code></a>
-   rule. <a href="#CSS3NAMESPACE"
-   rel=biblioentry>[CSS3NAMESPACE]<!--{{!CSS3NAMESPACE}}--></a>
-
-  <h3 id=case-sensitive><span class=secno>3.2. </span> Characters and case
+  <h3 id=case-sensitive><span class=secno>3.1. </span> Characters and case
    sensitivity</h3>
 
   <p>All Selectors syntax is case-insensitive within the ASCII range (i.e.
@@ -843,6 +839,17 @@ <h3 id=case-sensitive><span class=secno>3.2. </span> Characters and case
    rules</a> as CSS. <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
 
+  <h3 id=namespaces><span class=secno>3.2. </span> Namespaces</h3>
+
+  <p>Certain selectors support namespace prefixes. The mechanism by which
+   namespace prefixes are <dfn id=declared>declared</dfn> should be specified
+   by the language that uses Selectors. If the language does not specify a
+   namespace prefix declaration mechanism, then no prefixes are declared. In
+   CSS, namespace prefixes are declared with the <a
+   href="http://www.w3.org/TR/css3-namespace/#declaration"><code>@namespace</code></a>
+   rule. <a href="#CSS3NAMESPACE"
+   rel=biblioentry>[CSS3NAMESPACE]<!--{{!CSS3NAMESPACE}}--></a>
+
   <h3 id=invalid><span class=secno>3.3. </span> Invalid Selectors and Error
    Handling</h3>
 
@@ -852,16 +859,24 @@ <h3 id=invalid><span class=secno>3.3. </span> Invalid Selectors and Error
   <p>User agents must observe the rules for handling parsing errors:
 
   <ul>
-   <li>a simple selector containing an <a href="#nsdecl">undeclared namespace
-    prefix</a> is invalid
+   <li>a simple selector containing an <a href="#namespaces">undeclared
+    namespace prefix</a> is invalid
 
    <li>a selector containing an invalid simple selector, an invalid
     combinator or an invalid token is invalid.
 
    <li>a group of selectors containing an invalid selector is invalid.
   </ul>
 
-  <h2 id=grouping><span class=secno>4. </span> Groups of selectors</h2>
+  <p class=issue>It's been <a
+   href="http://lists.w3.org/Archives/Public/www-style/2010Nov/0203.html">requested</a>
+   that the last rule be dropped in favor of Media Queries-style
+   error-handling.
+
+  <h2 id=logical-combination><span class=secno>4. </span> Logical
+   Combinations</h2>
+
+  <h3 id=grouping><span class=secno>4.1. </span> Groups of selectors</h3>
 
   <p>A comma-separated list of selectors represents the union of all elements
    selected by each of the individual selectors in the list. (A comma is
@@ -907,6 +922,78 @@ <h2 id=grouping><span class=secno>4. </span> Groups of selectors</h2>
     grouped, only the rule for <code>h2..foo</code> is dropped.)</p>
   </div>
 
+  <h3 id=matches><span class=secno>4.2. </span> The Matches-Any Psuedo-class:
+   &lsquo;<code class=css>:matches()</code>&rsquo;</h3>
+
+  <p>The <code>:matches(<var>X</var>)</code> pseudo-class is a functional
+   notation taking a comma-separated list of <a href="#compound">compound
+   selectors</a> as an argument. It represents an element that is represented
+   by any of its arguments.
+
+  <p><code>:matches()</code> may not be nested;
+   <code>:matches(:matches(...))</code> is invalid. Also pseudo-elements are
+   not valid within <code>:matches()</code>.
+
+  <p>Default namespace declarations do not affect the argument of the
+   matches-any pseudo-class unless the argument is a universal selector or a
+   type selector. (See below for examples.)
+
+  <h3 id=negation><span class=secno>4.3. </span> The Negation Pseudo-class:
+   &lsquo;<code class=css>:not()</code>&rsquo;</h3>
+
+  <p>The negation pseudo-class, <code>:not(<var>X</var>)</code>, is a
+   functional notation taking a comma-separated list of <a
+   href="#compound">compound selectors</a> as an argument. It represents an
+   element that is not represented by any of its arguments.
+
+  <p>Negations may not be nested; <code>:not(:not(...))</code> is invalid.
+   Also pseudo-elements are not valid within <code>:not()</code>.
+
+  <div class=example>
+   <p>Examples:</p>
+
+   <p>The following selector matches all <code>button</code> elements in an
+    HTML document that are not disabled.</p>
+
+   <pre>button:not([DISABLED])</pre>
+
+   <p>The following selector represents all but <code>FOO</code> elements.</p>
+
+   <pre>*:not(FOO)</pre>
+
+   <p>The following group of selectors represents all HTML elements except
+    links.</p>
+
+   <pre>html|*:not(:link):not(:visited)</pre>
+  </div>
+
+  <p>Default namespace declarations do not affect the argument of the
+   negation pseudo-class unless the argument is a universal selector or a
+   type selector.
+
+  <div class=example>
+   <p>Examples:</p>
+
+   <p>Assuming that the default namespace is bound to "http://example.com/",
+    the following selector represents all elements that are not in that
+    namespace:</p>
+
+   <pre>*|*:not(*)</pre>
+
+   <p>The following selector matches any element that is not being hovered,
+    regardless of its namespace. In particular, it is not limited to only
+    matching elements in the default namespace that are not being hovered,
+    and elements not in the default namespace don't match the rule when they
+    <em>are</em> being hovered.</p>
+
+   <pre>*|*:not(:hover)</pre>
+  </div>
+
+  <p class=note><strong>Note</strong>: the :not() pseudo allows useless
+   selectors to be written. For instance <code>:not(*|*)</code>, which
+   represents no element at all, or <code>foo:not(bar)</code>, which is
+   equivalent to <code>foo</code> but with a higher specificity.
+
   <h2 id=elemental-selectors><span class=secno>5. </span> Elemental selectors</h2>
 
   <h3 id=type-selectors><span class=secno>5.1. </span> Type selector</h3>
@@ -2134,62 +2221,6 @@ <h4 id=empty-pseudo><span class=secno>7.4.12. </span> :empty pseudo-class</h4>
    <pre>&lt;foo&gt;this is not &lt;bar&gt;:empty&lt;/bar&gt;&lt;/foo&gt;</pre>
   </div>
 
-  <h3 id=negation><span class=secno>7.5. </span> The negation pseudo-class</h3>
-
-  <p>The negation pseudo-class, <code>:not(<var>X</var>)</code>, is a
-   functional notation taking a <a href="#simple-selectors-dfn">simple
-   selector</a> (excluding the negation pseudo-class itself) as an argument.
-   It represents an element that is not represented by its argument.
-
-  <p>Negations may not be nested; <code>:not(:not(...))</code> is invalid.
-   Note also that since pseudo-elements are not simple selectors, they are
-   not a valid argument to <code>:not()</code>.
-
-  <div class=example>
-   <p>Examples:</p>
-
-   <p>The following selector matches all <code>button</code> elements in an
-    HTML document that are not disabled.</p>
-
-   <pre>button:not([DISABLED])</pre>
-
-   <p>The following selector represents all but <code>FOO</code> elements.</p>
-
-   <pre>*:not(FOO)</pre>
-
-   <p>The following group of selectors represents all HTML elements except
-    links.</p>
-
-   <pre>html|*:not(:link):not(:visited)</pre>
-  </div>
-
-  <p>Default namespace declarations do not affect the argument of the
-   negation pseudo-class unless the argument is a universal selector or a
-   type selector.
-
-  <div class=example>
-   <p>Examples:</p>
-
-   <p>Assuming that the default namespace is bound to "http://example.com/",
-    the following selector represents all elements that are not in that
-    namespace:</p>
-
-   <pre>*|*:not(*)</pre>
-
-   <p>The following selector matches any element that is not being hovered,
-    regardless of its namespace. In particular, it is not limited to only
-    matching elements in the default namespace that are not being hovered,
-    and elements not in the default namespace don't match the rule when they
-    <em>are</em> being hovered.</p>
-
-   <pre>*|*:not(:hover)</pre>
-  </div>
-
-  <p class=note><strong>Note</strong>: the :not() pseudo allows useless
-   selectors to be written. For instance <code>:not(*|*)</code>, which
-   represents no element at all, or <code>foo:not(bar)</code>, which is
-   equivalent to <code>foo</code> but with a higher specificity.
-
   <h2 id=combinators><span class=secno>8. </span> Combinators</h2>
 
   <h3 id=descendant-combinators><span class=secno>8.1. </span> Descendant