[selectors] Clarify that specificity can change per element.

--HG--
extra : rebase_source : 6869766a55ec33944bcaea0808ce4c5083889cbe

Author: tabatkins

selectors/Overview.html

@@ -11,7 +11,7 @@
    rel=dcterms.rights>
   <meta content="Selectors Level 4" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-10-18 name=dcterms.date>
+  <meta content=2014-01-16 name=dcterms.date>
   <meta content="Elika J. Etemad" name=dcterms.creator>
   <meta content="Tab Atkins Jr." name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
@@ -32,13 +32,13 @@
 
    <h1 id=title>Selectors Level 4</h1>
 
-   <h2 class="no-num no-toc">Editor's Draft 18 October 2013</h2>
+   <h2 class="no-num no-toc">Editor's Draft 16 January 2014</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a href="http://dev.w3.org/csswg/selectors4/">
-     http://www.w3.org/TR/2013/ED-selectors4-20131018/</a>
+     http://www.w3.org/TR/2014/ED-selectors4-20140116/</a>
 
     <dt>Editor's draft:
 
@@ -96,7 +96,7 @@ <h2 class="no-num no-toc">Editor's Draft 18 October 2013</h2>
    <!--begin-copyright-->
    <p class=copyright><a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
-    rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
+    rel=license>Copyright</a> © 2014 <a href="http://www.w3.org/"><abbr
     title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
     href="http://www.csail.mit.edu/"><abbr
     title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
@@ -4164,25 +4164,26 @@ <h3 id=the-nth-last-column-pseudo><span class=secno>14.3. </span> <a
   <h2 id=specificity><span class=secno>15. </span> Calculating a selector's
    specificity</h2>
 
-  <p>A selector's specificity is calculated as follows:
+  <p>A selector's specificity is calculated for a given element as follows:
 
   <ul>
-   <li>count the number of ID selectors in the selector (= <a
-    href="#a"><var>A</var></a>)
+   <li>count the number of ID selectors in the selector (= <var
+    title="">A</var>)
 
    <li>count the number of class selectors, attributes selectors, and
-    pseudo-classes in the selector (= <a href="#b"><var>B</var></a>)
+    pseudo-classes in the selector (= <var title="">B</var>)
 
    <li>count the number of type selectors and pseudo-elements in the selector
-    (= <var>c</var>)
+    (= <var title="">C</var>)
 
    <li>ignore the universal selector
   </ul>
 
-  <p>The specificity of a <a href="#matches">:matches()</a> pseudo-class is
-   the specificity of the most specific complex selector that matched. (The
-   full selector's specificity is equivalent to expanding out all the
-   combinations in full, without <a
+  <p> In most cases, a selector has the same specificity for every element it
+   applies to. The specificity of a <a href="#matches">:matches()</a>
+   pseudo-class, however, is the specificity of the most specific complex
+   selector that matched the given element. (The full selector's specificity
+   is equivalent to expanding out all the combinations in full, without <a
    href="#matches-pseudo"><code>:matches()</code></a>.) The specificity of a
    <a href="#negation">:not()</a> pseudo-class is the specificity of the most
    specifc complex selector in its selector list. In either case, the
@@ -4191,17 +4192,17 @@ <h2 id=specificity><span class=secno>15. </span> Calculating a selector's
    like a tag selector.
 
   <p> Specificities are compared by comparing the three components in order:
-   the specificity with a larger <a href="#a"><var>A</var></a> value is more
-   specific; if the two <a href="#a"><var>A</var></a> values are tied, then
-   the specificity with a larger <a href="#b"><var>B</var></a> value is more
-   specific; if the two <a href="#b"><var>B</var></a> values are also tied,
-   then the specificity with a larger <var>c</var> value is more specific; if
-   all the values are tied, the two specifities are equal.
+   the specificity with a larger <var title="">A</var> value is more
+   specific; if the two <var title="">A</var> values are tied, then the
+   specificity with a larger <var title="">B</var> value is more specific; if
+   the two <var title="">B</var> values are also tied, then the specificity
+   with a larger <var title="">C</var> value is more specific; if all the
+   values are tied, the two specifities are equal.
 
   <p> Due to storage limitations, implementations may have limitations on the
-   size of <a href="#a"><var>A</var></a>, <a href="#b"><var>B</var></a>, or
-   <var>c</var>. If so, values higher than the limit must be clamped to that
-   limit, and not overflow.
+   size of <var title="">A</var>, <var title="">B</var>, or <var
+   title="">C</var>. If so, values higher than the limit must be clamped to
+   that limit, and not overflow.
 
   <div class=example>
    <p>Examples:
@@ -4732,10 +4733,9 @@ <h3 id=informative-references><span class=secno>21.2. </span> Informative
    <dt id=ref-CSSSTYLEATTR>[CSSSTYLEATTR]
 
    <dd>Tantek Çelik; Elika J. Etemad. <a
-    href="http://www.w3.org/TR/2013/PR-css-style-attr-20131003/"><cite>CSS
-    Style Attributes.</cite></a> 3 October 2013. W3C Proposed Recommendation.
-    (Work in progress.) URL: <a
-    href="http://www.w3.org/TR/2013/PR-css-style-attr-20131003/">http://www.w3.org/TR/2013/PR-css-style-attr-20131003/</a>
+    href="http://www.w3.org/TR/2013/REC-css-style-attr-20131107/"><cite>CSS
+    Style Attributes.</cite></a> 7 November 2013. W3C Recommendation. URL: <a
+    href="http://www.w3.org/TR/2013/REC-css-style-attr-20131107/">http://www.w3.org/TR/2013/REC-css-style-attr-20131107/</a>
    </dd>
    <!---->
 
@@ -4798,10 +4798,9 @@ <h3 id=informative-references><span class=secno>21.2. </span> Informative
    <dt id=ref-SELECTORS-API2>[SELECTORS-API2]
 
    <dd>Lachlan Hunt. <a
-    href="http://www.w3.org/TR/2012/WD-selectors-api2-20120628/"><cite>Selectors
-    API Level 2.</cite></a> 28 June 2012. W3C Working Draft. (Work in
-    progress.) URL: <a
-    href="http://www.w3.org/TR/2012/WD-selectors-api2-20120628/">http://www.w3.org/TR/2012/WD-selectors-api2-20120628/</a>
+    href="http://www.w3.org/TR/2013/NOTE-selectors-api2-20131017/"><cite>Selectors
+    API Level 2.</cite></a> 17 October 2013. W3C Working Group Note. URL: <a
+    href="http://www.w3.org/TR/2013/NOTE-selectors-api2-20131017/">http://www.w3.org/TR/2013/NOTE-selectors-api2-20131017/</a>
    </dd>
    <!---->
 

selectors/Overview.src.html

@@ -593,7 +593,7 @@ <h3 id="profiles">
 
   <p class='issue'>
     The categorization of things into the "fast" or "complete" profiles needs implementor review.
-    If some things currently not in the fast profile can reasonably be done in CSS Selectors, 
+    If some things currently not in the fast profile can reasonably be done in CSS Selectors,
     we should move them.
 
 
@@ -1576,20 +1576,20 @@ <h3 id="class-html">
 <h3 id="id-selectors">
 ID selectors</h3>
 
-  <p>Document languages may contain attributes that are declared to be of type ID. 
-    What makes attributes of type ID special 
-    is that no two such attributes can have the same value in a conformant document, 
-    regardless of the type of the elements that carry them; 
-    whatever the document language, 
-    an ID typed attribute can be used to uniquely identify its element. 
-    In HTML all ID attributes are named <code>id</code>; 
-    XML applications may name ID attributes differently, 
-    but the same restriction applies. 
+  <p>Document languages may contain attributes that are declared to be of type ID.
+    What makes attributes of type ID special
+    is that no two such attributes can have the same value in a conformant document,
+    regardless of the type of the elements that carry them;
+    whatever the document language,
+    an ID typed attribute can be used to uniquely identify its element.
+    In HTML all ID attributes are named <code>id</code>;
+    XML applications may name ID attributes differently,
+    but the same restriction applies.
     Which attribute on an element is considered the “ID attribute“ is defined by the document language.
 
-  <p>An <dfn>ID selector</dfn> consists of a “number sign” (U+0023, <code>#</code>) 
-    immediately followed by the ID value, 
-    which must be a CSS <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifier</a>. 
+  <p>An <dfn>ID selector</dfn> consists of a “number sign” (U+0023, <code>#</code>)
+    immediately followed by the ID value,
+    which must be a CSS <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifier</a>.
     An ID selector represents an element instance that has an identifier that matches the identifier in the ID selector.
     (It is possible in non-conforming documents for multiple elements to match a single ID selector.)
 
@@ -1822,7 +1822,7 @@ <h3 id="local-pseudo">
     <pre>nav :local-link { text-decoration: none; }</pre>
   </div>
 
-  <p>As a functional pseudo-class, <code>:local-link()</code> can also accept a non-negative integer as its sole argument, 
+  <p>As a functional pseudo-class, <code>:local-link()</code> can also accept a non-negative integer as its sole argument,
     which, if the document's URL belongs to a hierarchical scheme,
     indicates the number of path levels to match:
   <ul>
@@ -1837,7 +1837,7 @@ <h3 id="local-pseudo">
       underline.
     <pre>:not(:local-link(0)) { text-decoration-style: dashed; }</pre>
   </div>
-  
+
   <p>Path segments are portions of the URL's path that are separated by forward slashes (/).
     If a segment is missing from the document's URL,
     a pseudo-class requiring that segment to match does not match anything.
@@ -1883,7 +1883,7 @@ <h3 id="local-pseudo">
     the functional pseudo-class matches nothing.
 
   <p class="issue">
-    It's clear that, if the document URL has at least N segments, 
+    It's clear that, if the document URL has at least N segments,
     then <code>:local-link(N)</code> only matches links whose URL has at least N segments.
     (This lets you assign consistent semantics to :local-link so that,
     for example, :local-link(2) means a "within-repo" link on GitHub.)
@@ -2754,7 +2754,7 @@ <h3 id="selected-child-index">
     The '':nth-match()'' and '':nth-last-match()'' pseudo-classes
     allow one to build a selector for the latter interpretation.
 
-  <p>In the <i>fast</i> Selectors profile, only lists of <i>compound selectors</i> are allowed within these selectors.  
+  <p>In the <i>fast</i> Selectors profile, only lists of <i>compound selectors</i> are allowed within these selectors.
     In the <i>complete</i> profile, full <i>complex selectors</i> are allowed.
 
 <h4 id="the-nth-match-pseudo">
@@ -3006,17 +3006,19 @@ <h3 id="the-nth-last-column-pseudo">
 <h2 id="specificity">
 Calculating a selector's specificity</h2>
 
-  <p>A selector's specificity is calculated as follows:
+  <p>A selector's specificity is calculated for a given element as follows:
 
   <ul>
-    <li>count the number of ID selectors in the selector (= <var>A</var>)
-    <li>count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= <var>B</var>)
-    <li>count the number of type selectors and pseudo-elements in the selector (= <var>c</var>)
+    <li>count the number of ID selectors in the selector (= <var title=''>A</var>)
+    <li>count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= <var title=''>B</var>)
+    <li>count the number of type selectors and pseudo-elements in the selector (= <var title=''>C</var>)
     <li>ignore the universal selector
   </ul>
 
-  <p>The specificity of a <a href="#matches">:matches()</a> pseudo-class is
-    the specificity of the most specific complex selector that matched.
+  <p>
+    In most cases, a selector has the same specificity for every element it applies to.
+    The specificity of a <a href="#matches">:matches()</a> pseudo-class, however,
+    is the specificity of the most specific complex selector that matched the given element.
     (The full selector's specificity is equivalent to expanding out all the combinations in full, without <code>:matches()</code>.)
     The specificity of a <a href="#negation">:not()</a> pseudo-class is
     the specificity of the most specifc complex selector in its selector list.
@@ -3025,17 +3027,17 @@ <h2 id="specificity">
 
   <p>
     Specificities are compared by comparing the three components in order:
-    the specificity with a larger <var>A</var> value is more specific;
-    if the two <var>A</var> values are tied,
-    then the specificity with a larger <var>B</var> value is more specific;
-    if the two <var>B</var> values are also tied,
-    then the specificity with a larger <var>c</var> value is more specific;
+    the specificity with a larger <var title=''>A</var> value is more specific;
+    if the two <var title=''>A</var> values are tied,
+    then the specificity with a larger <var title=''>B</var> value is more specific;
+    if the two <var title=''>B</var> values are also tied,
+    then the specificity with a larger <var title=''>C</var> value is more specific;
     if all the values are tied,
     the two specifities are equal.
 
   <p>
     Due to storage limitations,
-    implementations may have limitations on the size of <var>A</var>, <var>B</var>, or <var>c</var>.
+    implementations may have limitations on the size of <var title=''>A</var>, <var title=''>B</var>, or <var title=''>C</var>.
     If so, values higher than the limit must be clamped to that limit,
     and not overflow.