Make formatting of references to pseudo-class selectors more uniform

PR: #761

source

@@ -66564,7 +66564,7 @@ contradict people?
 
 
      <dt>If the element is the <span>labeled control</span> of a <code>label</code> element that is
-     currently matching <span data-x="selector-active">:active</span></dt>
+     currently matching <code data-x="selector-active">:active</code></dt>
 
      <dd><p>The element is <i data-x="concept-selector-active">being activated</i>.</p></dd>
 
@@ -66663,7 +66663,7 @@ contradict people?
      <li>
 
       <p>An element that is the <span>labeled control</span> of a <code>label</code> element that is
-      currently matching <span data-x="selector-hover">:hover</span>.</p>
+      currently matching <code data-x="selector-hover">:hover</code>.</p>
 
      </li>
 
@@ -66684,14 +66684,14 @@ Demos:
      <p>If the user designates the element with ID "<code data-x="">a</code>" with their pointing
      device, then the <code>p</code> element (and all its ancestors not shown in the snippet above),
      the <code>label</code> element, the element with ID "<code data-x="">a</code>", and the element
-     with ID "<code data-x="">c</code>" will match the <span data-x="selector-hover">:hover</span>
+     with ID "<code data-x="">c</code>" will match the <code data-x="selector-hover">:hover</code>
      pseudo-class. The element with ID "<code data-x="">a</code>" matches it from condition 1, the
      <code>label</code> and <code>p</code> elements match it because of condition 2 (one of their
      descendants is designated), and the element with ID "<code data-x="">c</code>" matches it
-     through condition 3 (its <code>label</code> element matches <span
-     data-x="selector-hover">:hover</span>). However, the element with ID "<code data-x="">b</code>"
-     does <em>not</em> match <span data-x="selector-hover">:hover</span>: its descendant is not
-     designated, even though it matches <span data-x="selector-hover">:hover</span>.</p>
+     through condition 3 (its <code>label</code> element matches <code
+     data-x="selector-hover">:hover</code>). However, the element with ID "<code data-x="">b</code>"
+     does <em>not</em> match <code data-x="selector-hover">:hover</code>: its descendant is not
+     designated, even though it matches <code data-x="selector-hover">:hover</code>.</p>
 
     </div>
 
@@ -66702,11 +66702,11 @@ Demos:
 
    <dd>
 
-    <p>For the purposes of the CSS ':focus' pseudo-class, an <dfn>element has the focus</dfn> when
-    its <span>top-level browsing context</span> has the system focus, it is not itself a
-    <span>browsing context container</span>, and it is one of the elements listed in the <span>focus
-    chain</span> of the <span data-x="currently focused area of a top-level browsing
-    context">currently focused area of the top-level browsing context</span>.</p>
+    <p>For the purposes of the CSS <code data-x="selector-focus">:focus</code> pseudo-class, an
+    <dfn>element has the focus</dfn> when its <span>top-level browsing context</span> has the system
+    focus, it is not itself a <span>browsing context container</span>, and it is one of the elements
+    listed in the <span>focus chain</span> of the <span data-x="currently focused area of a
+    top-level browsing context">currently focused area of the top-level browsing context</span>.</p>
 
    </dd>
 
@@ -107182,21 +107182,23 @@ html, body { display: block; }</pre>
   value is expected to be parsed using the <span>rules for parsing a legacy colour value</span>, and
   if that does not return an error, the user agent is expected to treat the attribute as a <span
   data-x="presentational hints">presentational hint</span> setting the 'color' property of any
-  element in the <code>Document</code> matching the ':link' pseudo-class to the resulting colour.</p>
+  element in the <code>Document</code> matching the <code data-x="selector-link">:link</code>
+  pseudo-class to the resulting colour.</p>
 
   <p>When a <code>body</code> element has a <code data-x="attr-body-vlink">vlink</code> attribute,
   its value is expected to be parsed using the <span>rules for parsing a legacy colour value</span>,
   and if that does not return an error, the user agent is expected to treat the attribute as a <span
   data-x="presentational hints">presentational hint</span> setting the 'color' property of any
-  element in the <code>Document</code> matching the ':visited' pseudo-class to the resulting
-  colour.</p>
+  element in the <code>Document</code> matching the <code data-x="selector-visited">:visited</code>
+  pseudo-class to the resulting colour.</p>
 
   <p>When a <code>body</code> element has an <code data-x="attr-body-alink">alink</code> attribute,
   its value is expected to be parsed using the <span>rules for parsing a legacy colour value</span>,
   and if that does not return an error, the user agent is expected to treat the attribute as a <span
   data-x="presentational hints">presentational hint</span> setting the 'color' property of any
-  element in the <code>Document</code> matching the ':active' pseudo-class and either the ':link'
-  pseudo-class or the ':visited' pseudo-class to the resulting colour.</p>
+  element in the <code>Document</code> matching the <code data-x="selector-active">:active</code>
+  pseudo-class and either the <code data-x="selector-link">:link</code> pseudo-class or the <code
+  data-x="selector-visited">:visited</code> pseudo-class to the resulting colour.</p>
 
 
 
@@ -109429,10 +109431,11 @@ keygen { binding: <i>keygen</i>; }</pre>
   elements in their user interface.</p>
 
   <p class="note">While <code>link</code> elements that create <span
-  data-x="hyperlink">hyperlinks</span> will match the ':link' or ':visited' pseudo-classes, will
-  react to clicks if visible, and so forth, this does not extend to any browser interface constructs
-  that expose those same links. Activating a link through the browser's interface, rather than in
-  the page itself, does not trigger <code data-x="event-click">click</code> events and the like.</p>
+  data-x="hyperlink">hyperlinks</span> will match the <code data-x="selector-link">:link</code> or
+  <code data-x="selector-visited">:visited</code> pseudo-classes, will react to clicks if visible,
+  and so forth, this does not extend to any browser interface constructs that expose those same
+  links. Activating a link through the browser's interface, rather than in the page itself, does not
+  trigger <code data-x="event-click">click</code> events and the like.</p>