[css3-page] Clarify page selectors.

Author: SimonSapin

css3-page/Overview.html

@@ -9,7 +9,7 @@
    rel=dcterms.rights>
   <meta content=" CSS Paged Media Module Level 3" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-03-07 name=dcterms.issued>
+  <meta content=2013-03-08 name=dcterms.issued>
   <meta content="Melinda Grant" name=dcterms.creator>
   <meta content="Håkon Wium Lie" name=dcterms.creator>
   <meta content="Elika J. Etemad" name=dcterms.creator>
@@ -100,15 +100,15 @@
     <h1 class=p-name>CSS Paged Media Module Level 3</h1>
 
     <h2 class="no-num no-toc" id=w3c-working>Editor's Draft <span
-     class=dt-updated><span class=value-title title=20130307> 7 March
+     class=dt-updated><span class=value-title title=20130308> 8 March
      2013</span></span></h2>
 
     <dl>
      <dt>This version:
 
      <dd><a class=u-url
       href="http://dev.w3.org/csswg/css3-page/">http://dev.w3.org/csswg/css3-page/</a></dd>
-     <!-- <dd><a class="u-url" href="http://dev.w3.org/csswg/css3-page/">http://www.w3.org/TR/2013/WD-css3-page-20130307</a></dd> -->
+     <!-- <dd><a class="u-url" href="http://dev.w3.org/csswg/css3-page/">http://www.w3.org/TR/2013/WD-css3-page-20130308</a></dd> -->
 
      <dt>Latest version:
 
@@ -219,7 +219,7 @@ <h2 class="no-num no-toc" id=status>Status of this Document</h2>
    <p>This document contains the <abbr
     title="Cascading Style Sheets">CSS3</abbr> Paged Media Module W3C Last
     Call <a href="/2005/10/Process-20051014/tr.html#RecsWD">Working Draft</a>
-    of 7 March 2013. The Last Call period ends on <span
+    of 8 March 2013. The Last Call period ends on <span
     class=fudge>TBD</span>.
 
    <p>Expected next revision to this document is another LCWD, due to the
@@ -536,7 +536,7 @@ <h2 id=page-terms><span class=secno>3. </span>Page Terminology</h2>
      binding edges of facing pages are vertical and adjacent when the pages
      are placed in their normal reading orientation.
 
-    <dt id=left-page>Left Page
+    <dt><dfn id=left-page>Left Page</dfn>
 
     <dd>A page that would be on the left if it is part of a pair of facing
      pages as typically laid out. Page layouts for documents using a
@@ -545,7 +545,7 @@ <h2 id=page-terms><span class=secno>3. </span>Page Terminology</h2>
      <span class=css>‘<code class=css>:left</code>’</span> <a
      href="#page-selector"><i>page selector</i></a>.
 
-    <dt id=right-page>Right Page
+    <dt><dfn id=right-page>Right Page</dfn>
 
     <dd>A page that would be on the right if it is part of a pair of facing
      pages as typically laid out. Page layouts for documents using a
@@ -855,12 +855,13 @@ <h3 id=at-page-rule><span class=secno>5.1. </span>The @page Rule</h3>
     only allows <a href="#margin-at-rules">margin at-rules</a> inside
     ‘<code class=css>@page</code>’.
 
-   <p>‘<code class=css>@page</code>’ rules without a selector list are
-    considered to have a single, empty selector. ‘<code
-    class=css>@page</code>’ rules apply to pages that <a
-    href="#match"><i>match</i></a> at least one of their selectors.
+   <p> ‘<code class=css>@page</code>’ rules without a selector list apply
+    to every page. Other ‘<code class=css>@page</code>’ rules apply to
+    pages that <a href="#match"><i>match</i></a> at least one of their
+    selectors.
 
    <p>Properties declared within the page context apply to the page box.
+    <!-- XXX except for background properties -->
 
    <p>If an error is encountered during the processing of a declaration block
     within a page or a margin context, the <a
@@ -870,26 +871,18 @@ <h3 id=at-page-rule><span class=secno>5.1. </span>The @page Rule</h3>
 
    <h3 id=page-selectors><span class=secno>5.2. </span>Page selectors</h3>
 
-   <p>A <dfn id=page-selector>page selector</dfn> is either:
-
-   <ul>
-    <li>one or more <a
-     href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII
-     case-insensitive</a> <a href="#pseudo-classes">pseudo-classes</a>,
-
-    <li>a <a href="#using-named-pages">page type</a> (a case-sensitive
-     identifier) followed by zero or more pseudo-classes.
-   </ul>
-
-   <p> No whitespace is allowed between components of a selector. The <a
-    href="#page_selector"><i title="page_selector">page selector
-    grammar</i></a> and examples can be found below.
+   <p> A <dfn id=page-selector>page selector</dfn> is made of an optional <a
+    href="#using-named-pages">page type</a> (a case-sensitive identifier)
+    followed by zero or more <a
+    href="http://www.w3.org/TR/CSS21/syndata.html#characters"> ASCII
+    case-insensitive</a> <a href="#pseudo-classes">pseudo-classes</a>. At
+    least a page type or one pseudo-class is required. No whitespace is
+    allowed between components of a selector. The <a href="#page_selector"><i
+    title="page_selector">page selector grammar</i></a> and examples can be
+    found below.
 
    <p>A selector is said to <dfn id=match>match</dfn> a given page if and
-    only if all of its components match the page. Empty selectors (ie.
-    ‘<code class=css>@page</code>’ rules without a selector) match every
-    page. <span class=note>Empty selectors have the weakest <a
-    href="#specificity"><i>specificity</i></a>.</span>
+    only if all of its components match the page.
 
    <p><a href="#using-named-pages">Page type</a> selectors <a
     href="#match"><i>match</i></a> pages of the named type generated by the
@@ -915,8 +908,10 @@ <h4 id=pseudo-classes><span class=secno>5.2.1. </span> <a
     agents as either left pages or right pages, based on <a
     href="#progression">page progression</a>. The ‘<code
     class=css>:left</code>’ and ‘<code class=css>:right</code>’
-    pseudo-classes only <a href="#match"><i>match</i></a> left or right
-    pages, respectively.
+    pseudo-classes only <a href="#match"><i>match</i></a> <a
+    href="#left-page"><i title="Left page">left</i></a> or <a
+    href="#right-page"><i title="Right page">right pages</i></a>,
+    respectively.
 
    <div class=example> The following example creates left and right binding
     edges using these pseudo-classes:
@@ -1183,22 +1178,24 @@ <h3 id=cascading-and-page-context><span class=secno>5.4. </span>Cascading
      class=css>:right</code>’ pseudo-classes (= <var>h</var>)
    </ul>
 
-   <p> Specificities are compared by comparing the three components in order:
-    the specificity with <var>f</var> larger a value is more specific; if the
-    two <var>f</var> values are tied, then the specificity with a larger
-    <var>g</var> value is more specific; if the two <var>g</var> values are
-    also tied, then the specificity with a larger <var>h</var> value is more
-    specific; if all the values are tied, the two specifities are equal.
+   <p class=note> Note: Repeated occurrences of the same pseudo-classes are
+    allowed and do increase specificity.
 
    <p> Due to storage limitations, implementations may have limitations on
     the size of <var>f</var>, <var>g</var>, or <var>h</var>. If so, values
     higher than the limit must be clamped to that limit, and not overflow.
 
-   <p class=note> Note: Each comma-separated selectors in the same ‘<code
-    class=css>@page</code>’ rule has its own specificity.
+   <p> Specificities are compared by comparing the three components in order:
+    the specificity with a larger <var>f</var> value is more specific; if the
+    two <var>f</var> values are tied, then the specificity with a larger
+    <var>g</var> value is more specific; if the two <var>g</var> values are
+    also tied, then the specificity with a larger <var>h</var> value is more
+    specific; if all the values are tied, the two specifities are equal.
 
-   <p class=note> Note: Repeated occurrances of the same pseudo-classes are
-    allowed and do increase specificity.
+   <p> The specificity of an ‘<code class=css>@page</code>’ rule without
+    a selector list is <var>f</var> = <var>g</var> = <var>h</var> = 0. Other
+    ‘<code class=css>@page</code>’ rules have the largest specificity of
+    its selectors.
 
    <div class=example>
     <p>Some page specificity calculation examples follow:
@@ -1207,6 +1204,7 @@ <h3 id=cascading-and-page-context><span class=secno>5.4. </span>Cascading
 @page { } /* specificity = (0,0,0) */
 @page :left { } /* specificity = (0,0,1) */
 @page :first { } /* specificity = (0,1,0) */
+@page :first, :blank:left { } /* specificity = (0,1,1) */
 @page artsy { } /* specificity = (1,0,0) */
 @page artsy:left { } /* specificity = (1,0,1) */
 @page artsy:first { } /* specificity = (1,1,0) */

css3-page/Overview.src.html

@@ -287,15 +287,15 @@ <h2 id="page-terms">Page Terminology</h2>
   are vertical and adjacent when the pages are placed in their normal reading
   orientation.</dd>
 
-  <dt id="left-page">Left Page</dt>
+  <dt><dfn id="left-page">Left Page</dfn></dt>
   <dd>A page that would be on the left if it is part of a pair of facing pages as
   typically laid out. Page layouts for documents using a left-to-right page
   progression have the earlier of the facing pages on the left. Rules specific to
   the left page can be specified using the <span class="css">':left'</span>
   <i>page selector</i>.
   </dd>
 
-  <dt id="right-page">Right Page</dt>
+  <dt><dfn id="right-page">Right Page</dfn></dt>
   <dd>A page that would be on the right if it is part of a pair of facing pages as
   typically laid out. Page layouts for documents using a right-to-left page
   progression have the earlier of the facing pages on the right. Rules specific
@@ -554,9 +554,9 @@ <h3 id="at-page-rule">The @page Rule</h3>
 The current level of this specification
 only allows <a href="#margin-at-rules">margin at-rules</a> inside ''@page''.
 
-<p>''@page'' rules without a selector list
-  are considered to have a single, empty selector.
-  ''@page'' rules apply to pages that <i>match</i>
+<p>
+  ''@page'' rules without a selector list apply to every page.
+  Other ''@page'' rules apply to pages that <i>match</i>
   at least one of their selectors.
 
 <p>Properties declared within the page context apply to the page box.
@@ -568,26 +568,21 @@ <h3 id="at-page-rule">The @page Rule</h3>
 
 <h3 id="page-selectors">Page selectors</h3>
 
-<p>A <dfn id="page-selector">page selector</dfn> is either:
-
-<ul>
-  <li>one or more
-    <a href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII case-insensitive</a>
-    <a href="#pseudo-classes">pseudo-classes</a>,
-  <li>a <a href="#using-named-pages">page type</a>
-    (a case-sensitive identifier)
-    followed by zero or more pseudo-classes.
-</ul>
-
 <p>
+  A <dfn id="page-selector">page selector</dfn> is made of
+  an optional <a href="#using-named-pages">page type</a>
+  (a case-sensitive identifier)
+  followed by zero or more
+  <a href="http://www.w3.org/TR/CSS21/syndata.html#characters">
+  ASCII case-insensitive</a>
+  <a href="#pseudo-classes">pseudo-classes</a>.
+  At least a page type or one pseudo-class is required.
   No whitespace is allowed between components of a selector.
   The <i title="page_selector">page selector grammar</i>
   and examples can be found below.
 
 <p>A selector is said to <dfn>match</dfn> a given page if and only if
   all of its components match the page.
-  Empty selectors (ie. ''@page'' rules without a selector) match every page.
-  <span class="note">Empty selectors have the weakest <i>specificity</i>.</span>
 
 <p><a href="#using-named-pages">Page type</a> selectors <i>match</i>
   pages of the named type generated by the 'page' property.
@@ -616,7 +611,8 @@ <h4 id="pseudo-classes">
   as either left pages or right pages,
   based on <a href="#progression">page progression</a>.
   The '':left'' and '':right'' pseudo-classes only <i>match</i>
-  left or right pages, respectively.
+  <i title="Left page">left</i> or <i title="Right page">right pages</i>,
+  respectively.
 
 <div class="example">
 The following example creates left and right binding edges using these pseudo-classes:
@@ -851,14 +847,9 @@ <h3 id="cascading-and-page-context">Cascading in the page context</h3>
   <li>Count the number of ':left' or ':right' pseudo-classes (= <var>h</var>)
 </ul>
 
-<p>
-  Specificities are compared by comparing the three components in order:
-  the specificity with <var>f</var> larger a value is more specific;
-  if the two <var>f</var> values are tied,
-  then the specificity with a larger <var>g</var> value is more specific;
-  if the two <var>g</var> values are also tied,
-  then the specificity with a larger <var>h</var> value is more specific;
-  if all the values are tied, the two specifities are equal.
+<p class="note">
+  Note: Repeated occurrences of the same pseudo-classes are allowed
+  and do increase specificity.
 
 <p>
   Due to storage limitations,
@@ -867,13 +858,19 @@ <h3 id="cascading-and-page-context">Cascading in the page context</h3>
   If so, values higher than the limit must be clamped to that limit,
   and not overflow.
 
-<p class="note">
-  Note: Each comma-separated selectors in the same ''@page'' rule
-  has its own specificity.
+<p>
+  Specificities are compared by comparing the three components in order:
+  the specificity with a larger <var>f</var> value is more specific;
+  if the two <var>f</var> values are tied,
+  then the specificity with a larger <var>g</var> value is more specific;
+  if the two <var>g</var> values are also tied,
+  then the specificity with a larger <var>h</var> value is more specific;
+  if all the values are tied, the two specifities are equal.
 
-<p class="note">
-  Note: Repeated occurrances of the same pseudo-classes are allowed
-  and do increase specificity.
+<p>
+  The specificity of an ''@page'' rule without a selector list is
+  <var>f</var> = <var>g</var> = <var>h</var> = 0.
+  Other ''@page'' rules have the largest specificity of its selectors.
 
 <div class="example">
 
@@ -882,6 +879,7 @@ <h3 id="cascading-and-page-context">Cascading in the page context</h3>
 @page { } /* specificity = (0,0,0) */
 @page :left { } /* specificity = (0,0,1) */
 @page :first { } /* specificity = (0,1,0) */
+@page :first, :blank:left { } /* specificity = (0,1,1) */
 @page artsy { } /* specificity = (1,0,0) */
 @page artsy:left { } /* specificity = (1,0,1) */
 @page artsy:first { } /* specificity = (1,1,0) */