machine-generated version

Author: howcome

css-gcpm/Overview.html

@@ -290,12 +290,12 @@ <h2 class="no-num no-toc" id=table-of-contents><a name=contents>Table of
      <li><a href="#selecting-certain-named-pages"><span class=secno>13.1.
       </span>Selecting certain named pages</a>
 
-     <li><a href="#page-groups-"><span class=secno>13.2. </span>Page groups
-      </a>
+     <li><a href="#selecting-elements-within-pages-and-colu"><span
+      class=secno>13.2. </span>Selecting elements within pages and
+      columns</a>
 
-     <li><a href="#page-and-column-pseudo-elements"><span class=secno>13.3.
-      </span>‘<code class=property>page</code>’ and ‘<code
-      class=property>column</code>’ pseudo-elements</a>
+     <li><a href="#page-groups-"><span class=secno>13.3. </span>Page groups
+      </a>
     </ul>
 
    <li><a href="#selecting-lines"><span class=secno>14. </span>Selecting
@@ -4130,12 +4130,80 @@ <h3 id=selecting-certain-named-pages><span class=secno>13.1.
 </pre>
   </div>
 
-  <h3 id=page-groups-><span class=secno>13.2. </span>Page groups</h3>
+  <h3 id=selecting-elements-within-pages-and-colu><span class=secno>13.2.
+   </span>Selecting elements within pages and columns</h3>
+
+  <p>The ‘<code class=css>page()</code>’ and ‘<code
+   class=css>column()</code>’ 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.
+
+  <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 id=page-groups-><span class=secno>13.3. </span>Page groups</h3>
 
   <p>Named pages can appear in sequence, stemming from different elements. A
-   sequnce of named pages is called a <em>page group</em>. The ‘<a
-   href="#page-group"><code class=property>page-group</code></a>’ property
-   expresses whether an element starts a new page group or not.
+   sequnce of named pages with the same name is called a <em>page group</em>.
+   The ‘<a href="#page-group"><code class=property>page-group</code></a>’
+   property expresses whether an element starts a new page group or not.
 
   <table class=propdef>
    <tbody>
@@ -4193,15 +4261,15 @@ <h3 id=page-groups-><span class=secno>13.2. </span>Page groups</h3>
 
    <dt>start
 
-   <dd>The element starts a new page group.
+   <dd>The element always starts a new page group.
   </dl>
 
   <div class=example>
    <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 {
@@ -4214,57 +4282,6 @@ <h3 id=page-groups-><span class=secno>13.2. </span>Page groups</h3>
     only the first page of the first article would be pink.
   </div>
 
-  <h3 id=page-and-column-pseudo-elements><span class=secno>13.3.
-   </span>‘<code class=property>page</code>’ and ‘<code
-   class=property>column</code>’ pseudo-elements</h3>
-
-  <p>The ‘<code class=css>page()</code>’ and ‘<code
-   class=css>column()</code>’ 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 id=selecting-lines><span class=secno>14. </span>Selecting lines</h2>
 
   <p>The ‘<code class=property>first-line</code>’ pseudo-element selects
@@ -4899,7 +4916,7 @@ <h2 class=no-num id=index>Index</h2>
     title="section 1."><strong>1.</strong></a>
 
    <li>page-group, <a href="#page-group"
-    title="section 13.2."><strong>13.2.</strong></a>
+    title="section 13.3."><strong>13.3.</strong></a>
 
    <li>running elements, <a href="#running-elements0"
     title="section 1."><strong>1.</strong></a>