[selectors] Rearrange the input pseudos.

Author: tabatkins

selectors/Overview.html

@@ -323,42 +323,54 @@ <h2 class="no-num no-toc" id=contents>Table of Contents</h2>
       language pseudo-class <code>:lang()</code></a>
     </ul>
 
-   <li><a href="#ui-states-pseudos"><span class=secno>11. </span> The UI
-    states pseudo-classes</a>
+   <li><a href="#input-pseudos"><span class=secno>11. </span> The Input
+    Pseudo-classes</a>
     <ul class=toc>
-     <li><a href="#enableddisabled"><span class=secno>11.1. </span> The
-      <code>:enabled</code> and <code>:disabled</code> pseudo-classes</a>
+     <li><a href="#input-states"><span class=secno>11.1. </span> Input
+      Control States</a>
+      <ul class=toc>
+       <li><a href="#enableddisabled"><span class=secno>11.1.1. </span> The
+        <code>:enabled</code> and <code>:disabled</code> pseudo-classes</a>
 
-     <li><a href="#placeholder"><span class=secno>11.2. </span> The
-      placeholder-shown pseudo-class <code>:placeholder-shown</code></a>
+       <li><a href="#rw-pseudos"><span class=secno>11.1.2. </span> The
+        mutability pseudo-classes <code>:read-only</code> and
+        <code>:read-write</code></a>
 
-     <li><a href="#checked"><span class=secno>11.3. </span> The
-      selected-option pseudo-class <code>:checked</code></a>
+       <li><a href="#placeholder"><span class=secno>11.1.3. </span> The
+        placeholder-shown pseudo-class <code>:placeholder-shown</code></a>
 
-     <li><a href="#indeterminate"><span class=secno>11.4. </span> The
-      indeterminate-value pseudo-class <code>:indeterminate</code></a>
+       <li><a href="#the-default-pseudo"><span class=secno>11.1.4. </span>
+        The default option pseudo-class <code>:default</code></a>
+      </ul>
 
-     <li><a href="#the-default-pseudo"><span class=secno>11.5. </span> The
-      default option pseudo-class <code>:default</code></a>
+     <li><a href="#input-value-states"><span class=secno>11.2. </span> Input
+      Value States</a>
+      <ul class=toc>
+       <li><a href="#checked"><span class=secno>11.2.1. </span> The
+        selected-option pseudo-class <code>:checked</code></a>
 
-     <li><a href="#validity-pseudos"><span class=secno>11.6. </span> The
-      validity pseudo-classes: <code>:valid</code> and
-      <code>:invalid</code></a>
+       <li><a href="#indeterminate"><span class=secno>11.2.2. </span> The
+        indeterminate-value pseudo-class <code>:indeterminate</code></a>
+      </ul>
 
-     <li><a href="#range-pseudos"><span class=secno>11.7. </span> The range
-      pseudo-classes <code>:in-range</code> and
-      <code>:out-of-range</code></a>
+     <li><a href="#ui-validity"><span class=secno>11.3. </span> Input
+      Value-checking</a>
+      <ul class=toc>
+       <li><a href="#validity-pseudos"><span class=secno>11.3.1. </span> The
+        validity pseudo-classes: <code>:valid</code> and
+        <code>:invalid</code></a>
 
-     <li><a href="#opt-pseudos"><span class=secno>11.8. </span> The
-      optionality pseudo-classes <code>:required</code> and
-      <code>:optional</code></a>
+       <li><a href="#range-pseudos"><span class=secno>11.3.2. </span> The
+        range pseudo-classes <code>:in-range</code> and
+        <code>:out-of-range</code></a>
 
-     <li><a href="#user-pseudos"><span class=secno>11.9. </span> The
-      user-interaction pseudo-class <code>:user-error</code></a>
+       <li><a href="#opt-pseudos"><span class=secno>11.3.3. </span> The
+        optionality pseudo-classes <code>:required</code> and
+        <code>:optional</code></a>
 
-     <li><a href="#rw-pseudos"><span class=secno>11.10. </span> The
-      mutability pseudo-classes <code>:read-only</code> and
-      <code>:read-write</code></a>
+       <li><a href="#user-pseudos"><span class=secno>11.3.4. </span> The
+        user-interaction pseudo-class <code>:user-error</code></a>
+      </ul>
     </ul>
 
    <li><a href="#structural-pseudos"><span class=secno>12. </span>
@@ -2793,12 +2805,16 @@ <h3 id=the-lang-pseudo><span class=secno>10.2. </span> The language
 
   <p class=note>Wildcard language matching is new in Level 4.
 
-  <h2 id=ui-states-pseudos><span class=secno>11. </span> The UI states
-   pseudo-classes</h2>
+  <h2 id=input-pseudos><span class=secno>11. </span> The Input Pseudo-classes</h2>
 
-  <h3 id=enableddisabled><span class=secno>11.1. </span> The <a
+  <p> The pseudo-classes in this section mostly apply to elements that take
+   user input, such as HTML’s <code>&lt;input></code> element.
+
+  <h3 id=input-states><span class=secno>11.1. </span> Input Control States</h3>
+
+  <h4 id=enableddisabled><span class=secno>11.1.1. </span> The <a
    href="#enabled-pseudo"><code>:enabled</code></a> and <a
-   href="#disabled-pseudo"><code>:disabled</code></a> pseudo-classes</h3>
+   href="#disabled-pseudo"><code>:disabled</code></a> pseudo-classes</h4>
 
   <p>The <dfn id=enabled-pseudo>:enabled</dfn> pseudo-class represents user
    interface elements that are in an enabled state; such elements have a
@@ -2822,18 +2838,49 @@ <h3 id=enableddisabled><span class=secno>11.1. </span> The <a
    <code>display</code> and <code>visibility</code> properties have no effect
    on the enabled/disabled state of an element.
 
-  <h3 id=placeholder><span class=secno>11.2. </span> The placeholder-shown
+  <h4 id=rw-pseudos><span class=secno>11.1.2. </span> The mutability
+   pseudo-classes <a href="#read-only-pseudo"><code>:read-only</code></a> and
+   <a href="#read-write-pseudo"><code>:read-write</code></a></h4>
+
+  <p>An element matches <dfn id=read-write-pseudo>:read-write</dfn> if it is
+   user-alterable, as defined by the host language. Otherwise, it is <dfn
+   id=read-only-pseudo>:read-only</dfn>.
+
+  <p>For example, in HTML5 a non-disabled non-readonly
+   <code>&lt;input></code> element is <a
+   href="#read-write-pseudo"><code>:read-write</code></a>, as is any element
+   with the <code>contenteditable</code> attribute set to the true state. <a
+   href="#HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>
+
+  <h4 id=placeholder><span class=secno>11.1.3. </span> The placeholder-shown
    pseudo-class <a
-   href="#placeholder-shown-pseudo"><code>:placeholder-shown</code></a></h3>
+   href="#placeholder-shown-pseudo"><code>:placeholder-shown</code></a></h4>
 
   <p>Input elements can sometimes show placeholder text as a hint to the user
    on what to type in. See, for example, the <code>placeholder</code>
    attribute in <a href="#HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>.
    The <dfn id=placeholder-shown-pseudo>:placeholder-shown</dfn> pseudo-class
    matches an input element that is showing such placeholder text.
 
-  <h3 id=checked><span class=secno>11.3. </span> The selected-option
-   pseudo-class <a href="#checked-pseudo"><code>:checked</code></a></h3>
+  <h4 id=the-default-pseudo><span class=secno>11.1.4. </span> The default
+   option pseudo-class <a href="#default-pseudo"><code>:default</code></a></h4>
+
+  <p>The <dfn id=default-pseudo>:default</dfn> pseudo-class applies to the
+   one or more UI elements that are the default among a set of similar
+   elements. Typically applies to context menu items, buttons and select
+   lists/menus.
+
+  <p>One example is the default submit button among a set of buttons. Another
+   example is the default option from a popup menu. Multiple elements in a
+   select-many group could have multiple <a
+   href="#default-pseudo"><code>:default</code></a> elements, like a
+   selection of pizza toppings for example.
+
+  <h3 id=input-value-states><span class=secno>11.2. </span> Input Value
+   States</h3>
+
+  <h4 id=checked><span class=secno>11.2.1. </span> The selected-option
+   pseudo-class <a href="#checked-pseudo"><code>:checked</code></a></h4>
 
   <p>Radio and checkbox elements can be toggled by the user. Some menu items
    are "checked" when the user selects them. When such elements are toggled
@@ -2858,9 +2905,9 @@ <h3 id=checked><span class=secno>11.3. </span> The selected-option
    <pre>:not(:checked)</pre>
   </div>
 
-  <h3 id=indeterminate><span class=secno>11.4. </span> The
+  <h4 id=indeterminate><span class=secno>11.2.2. </span> The
    indeterminate-value pseudo-class <a
-   href="#indetermine-pseudo"><code>:indeterminate</code></a></h3>
+   href="#indetermine-pseudo"><code>:indeterminate</code></a></h4>
 
   <p>The <dfn id=indetermine-pseudo>:indeterminate</dfn> pseudo-class applies
    to UI elements whose value is in an indeterminate state. For example,
@@ -2877,23 +2924,11 @@ <h3 id=indeterminate><span class=secno>11.4. </span> The
    href="#indetermine-pseudo"><code>:indeterminate</code></a> even in a
    static display.
 
-  <h3 id=the-default-pseudo><span class=secno>11.5. </span> The default
-   option pseudo-class <a href="#default-pseudo"><code>:default</code></a></h3>
+  <h3 id=ui-validity><span class=secno>11.3. </span> Input Value-checking</h3>
 
-  <p>The <dfn id=default-pseudo>:default</dfn> pseudo-class applies to the
-   one or more UI elements that are the default among a set of similar
-   elements. Typically applies to context menu items, buttons and select
-   lists/menus.
-
-  <p>One example is the default submit button among a set of buttons. Another
-   example is the default option from a popup menu. Multiple elements in a
-   select-many group could have multiple <a
-   href="#default-pseudo"><code>:default</code></a> elements, like a
-   selection of pizza toppings for example.
-
-  <h3 id=validity-pseudos><span class=secno>11.6. </span> The validity
+  <h4 id=validity-pseudos><span class=secno>11.3.1. </span> The validity
    pseudo-classes: <a href="#valid-pseudo"><code>:valid</code></a> and <a
-   href="#invalid-pseudo"><code>:invalid</code></a></h3>
+   href="#invalid-pseudo"><code>:invalid</code></a></h4>
 
   <p> An element is <dfn id=valid-pseudo>:valid</dfn> or <dfn
    id=invalid-pseudo>:invalid</dfn> when its contents or value is,
@@ -2915,9 +2950,9 @@ <h3 id=validity-pseudos><span class=secno>11.6. </span> The validity
    <code>&lt;p></code> element has no validity semantics at all, and so it
    never matches either of these pseudo-classes.
 
-  <h3 id=range-pseudos><span class=secno>11.7. </span> The range
+  <h4 id=range-pseudos><span class=secno>11.3.2. </span> The range
    pseudo-classes <a href="#in-range-psuedo"><code>:in-range</code></a> and
-   <a href="#out-of-range-pseudo"><code>:out-of-range</code></a></h3>
+   <a href="#out-of-range-pseudo"><code>:out-of-range</code></a></h4>
 
   <p>The <dfn id=in-range-psuedo>:in-range</dfn> and <dfn
    id=out-of-range-pseudo>:out-of-range</dfn> pseudo-classes apply only to
@@ -2934,18 +2969,18 @@ <h3 id=range-pseudos><span class=secno>11.7. </span> The range
    menu element with a value of "E" that happens to be presented in a popup
    menu that only has choices "A", "B" and "C".
 
-  <h3 id=opt-pseudos><span class=secno>11.8. </span> The optionality
+  <h4 id=opt-pseudos><span class=secno>11.3.3. </span> The optionality
    pseudo-classes <a href="#required-pseudo"><code>:required</code></a> and
-   <a href="#optional-pseudo"><code>:optional</code></a></h3>
+   <a href="#optional-pseudo"><code>:optional</code></a></h4>
 
   <p>A form element is <dfn id=required-pseudo>:required</dfn> or <dfn
    id=optional-pseudo>:optional</dfn> if a value for it is, respectively,
    required or optional before the form it belongs to can be validly
    submitted. Elements that are not form elements are neither required nor
    optional.
 
-  <h3 id=user-pseudos><span class=secno>11.9. </span> The user-interaction
-   pseudo-class <a href="#user-error-pseudo"><code>:user-error</code></a></h3>
+  <h4 id=user-pseudos><span class=secno>11.3.4. </span> The user-interaction
+   pseudo-class <a href="#user-error-pseudo"><code>:user-error</code></a></h4>
 
   <p> The <dfn id=user-error-pseudo>:user-error</dfn> pseudo-class represents
    an input element with incorrect input, but only <em>after</em> the user
@@ -2968,10 +3003,9 @@ <h3 id=user-pseudos><span class=secno>11.9. </span> The user-interaction
    <p> For example, the input in the following document fragment would match
     <a href="#invalid-pseudo"><code>:invalid</code></a> as soon as the page
     is loaded (because it the initial value violates the max-constraint), but
-    it won’t match <a
-    href="#user-error-pseudo"><code>:user-error</code></a> until the user
-    significantly interacts with the element, or attempts to submit the form
-    it's part of.
+    it won't match <a href="#user-error-pseudo"><code>:user-error</code></a>
+    until the user significantly interacts with the element, or attempts to
+    submit the form it's part of.
 
    <pre><!--
     -->&lt;form>
@@ -2994,20 +3028,6 @@ <h3 id=user-pseudos><span class=secno>11.9. </span> The user-interaction
     <code>:user-invalid</code> and <code>:user-omitted</code> could be used.
 -->
 
-  <h3 id=rw-pseudos><span class=secno>11.10. </span> The mutability
-   pseudo-classes <a href="#read-only-pseudo"><code>:read-only</code></a> and
-   <a href="#read-write-pseudo"><code>:read-write</code></a></h3>
-
-  <p>An element matches <dfn id=read-write-pseudo>:read-write</dfn> if it is
-   user-alterable, as defined by the host language. Otherwise, it is <dfn
-   id=read-only-pseudo>:read-only</dfn>.
-
-  <p>For example, in HTML5 a non-disabled non-readonly
-   <code>&lt;input></code> element is <a
-   href="#read-write-pseudo"><code>:read-write</code></a>, as is any element
-   with the <code>contenteditable</code> attribute set to the true state. <a
-   href="#HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>
-
   <h2 id=structural-pseudos><span class=secno>12. </span> Tree-Structural
    pseudo-classes</h2>