revising examples; reordering sections

Author: howcome

css-gcpm/Overview.src.html

@@ -3556,9 +3556,82 @@ <h3>Selecting certain named pages</h3>
 </pre>
 </div>
 
+
+<h3>Selecting elements within pages and columns</h3>
+
+
+<p>The 'page()' and 'column()' pseudo-element allows the selection of
+pages, columns, and elements within.
+
+
+<div class=example>
+<pre>
+article::column(2n) {     /* select every other column of an article */
+  ...
+}
+</pre>
+</div>
+
+<div class=example>
+<pre>
+article::page(left) {   /* select all left pages in an article */
+  background: pink;
+} 
+</pre>
+</div>
+
+
+<div class=example>
+<pre>
+article::page(left) p {   /* select all p elements that appear on left pages in an article */
+  text-align: left;
+} 
+</pre>
+</div>
+
+<p>It is also possible to place the code inside @page:
+
+<div class=example>
+<p>These are identical:
+
+<pre>
+@page :left {
+  {
+    p { text-align: left } 
+  }
+}
+
+::page(left) p { text-align: left }
+</pre>
+</div>
+
+<p class=issue>Is "left" a pseudo-class or pseudo-element? In @page, ":left" is a pseudo-class. However, when we select elements on left pages, it acts like a pseudo-element.</p>
+
+</div>
+
+<div class=example>
+<pre>
+@page :left {
+  background: pink;            /* declaration applies to pages */
+  {
+    p { text-align: left }     /* declaration applies to elements on page */
+  }
+  @top-center {
+    background: orange;        /* declaration applies to margin box */
+    {
+      p { text-align: left }   /* declaration applies to elements in margin box */
+    }
+  }
+}
+</pre>
+</div>
+
+
+
+
 <h3>Page groups</h2>
 
-<p>Named pages can appear in sequence, stemming from different elements. A sequnce of named pages is called a <em>page group</em>. The 'page-group' property expresses whether an element starts a new page group or not.
+<p>Named pages can appear in sequence, stemming from different elements. A sequnce of named pages with the same name is called a <em>page group</em>. The 'page-group' property expresses whether an element starts a new page group or not.
 
 <table class=propdef>
     <tr>
@@ -3594,7 +3667,7 @@ <h3>Page groups</h2>
 <dd>The element only starts a new page group if 'page' has a named page different from the the previous element.
 
 <dt>start
-<dd>The element starts a new page group.
+<dd>The element always starts a new page group.
 
 </dl>
 
@@ -3604,7 +3677,7 @@ <h3>Page groups</h2>
 <p>In this example, each article starts a new page group so that the first page of each article has a pink background.
 
 <pre>
-@page funky:first-page {
+@page funky:first {
   background: pink;
 }
 article {
@@ -3617,57 +3690,6 @@ <h3>Page groups</h2>
 
 </div>
 
-<h3>'page' and 'column' pseudo-elements</h3>
-
-
-<p>The 'page()' and 'column()' pseudo-element allows the selection of
-pages, columns, and elements within.
-
-
-<div class=example>
-<pre>
-article::column(2n) {     /* select every other column of an article */
-  ...
-}
-</pre>
-</div>
-
-<div class=example>
-<pre>
-article::page(left) {   /* select all left pages in an article */
-  background: pink;
-} 
-</pre>
-</div>
-
-
-<div class=example>
-<pre>
-article::page(left) p {   /* select all p elements that appear on left pages in an article */
-  text-align: left;
-} 
-</pre>
-</div>
-
-<p>It is also possible to place the code inside @page:
-
-<div class=example>
-<pre>
-@page :left {
-  background: pink;            /* declaration applies to pages */
-  {
-    p { text-align: left }     /* declaration applies to elements on page */
-  }
-  @top-center {
-    background: orange;        /* declaration applies to margin box */
-    {
-      p { text-align: left }   /* declaration applies to elements in margin box */
-    }
-  }
-}
-</pre>
-</div>
-
 
 <h2>Selecting lines</h2>