[selectors] Rewrite :nth-of-type() and co a little better as well.

Author: tabatkins

selectors/Overview.bs

@@ -2755,9 +2755,10 @@ Typed Child-indexed Pseudo-classes</h3>
 '':nth-of-type()'' pseudo-class</h4>
 
 	The <dfn id='nth-of-type-pseudo' title=":nth-of-type()">:nth-of-type(<var>An+B</var>)</dfn> pseudo-class notation
-	represents an element that has <var>An+B</var>-1 siblings
-	with the same <a href="http://www.w3.org/TR/css3-namespace/#expanded-name">expanded element name</a>
-	<em>before</em> it in the document tree.
+	represents the <var>An+B</var>th element
+	with the same <a section href="#type-nmsp">namespace</a> and <a section href="#type-selectors">type</a>
+	among its siblings.
+
 	The CSS Syntax Module [[!CSS3SYN]] defines the <a href="http://dev.w3.org/csswg/css-syntax/#anb"><var>An+B</var> notation</a>.
 
 	<div class="example">
@@ -2780,9 +2781,11 @@ Typed Child-indexed Pseudo-classes</h3>
 '':nth-last-of-type()'' pseudo-class</h4>
 
 	The <dfn id='nth-last-of-type' title=":nth-last-of-type()">:nth-last-of-type(<var>An+B</var>)</dfn> pseudo-class notation
-	represents an element that has <var>An+B</var>-1 siblings
-	with the same <a href="http://www.w3.org/TR/css3-namespace/#expanded-name">expanded element name</a>
-	<em>after</em> it in the document tree.
+	represents the <var>An+B</var>th element
+	with the same <a section href="#type-nmsp">namespace</a> and <a section href="#type-selectors">type</a>
+	among its siblings,
+	counting backwards from the end.
+
 	The CSS Syntax Module [[!CSS3SYN]] defines the <a href="http://dev.w3.org/csswg/css-syntax/#anb"><var>An+B</var> notation</a>.
 
 	<div class="example">
@@ -2804,8 +2807,8 @@ Typed Child-indexed Pseudo-classes</h3>
 
 	The <dfn id='first-of-type-pseudo'>:first-of-type</dfn> pseudo-class
 	represents an element that is the first sibling
-	with the same <a href="http://www.w3.org/TR/css3-namespace/#expanded-name">expanded element name</a>
-	in its sibling list.
+	with a particular <a section href="#type-nmsp">namespace</a> and <a section href="#type-selectors">type</a>
+	among its siblings.
 	Same as '':nth-of-type(1)''.
 
 	<div class="example">
@@ -2839,9 +2842,10 @@ Typed Child-indexed Pseudo-classes</h3>
 '':last-of-type'' pseudo-class</h4>
 
 	The <dfn id='last-of-type-pseudo'>:last-of-type</dfn> pseudo-class
-	represents an element that is the last sibling
-	with the same <a href="http://www.w3.org/TR/css3-namespace/#expanded-name">expanded element name</a>
-	in its sibling list.
+	represents an element that is the first sibling
+	with a particular <a section href="#type-nmsp">namespace</a> and <a section href="#type-selectors">type</a>
+	among its siblings,
+	counting backwards from the end.
 	Same as '':nth-last-of-type(1)''.
 
 	<div class="example">
@@ -2857,7 +2861,7 @@ Typed Child-indexed Pseudo-classes</h3>
 
 	The <dfn id='only-of-type-pseudo'>:only-of-type</dfn> pseudo-class
 	represents an element that has no siblings
-	with the same <a href="http://www.w3.org/TR/css3-namespace/#expanded-name">expanded element name</a>.
+	with the same <a section href="#type-nmsp">namespace</a> and <a section href="#type-selectors">type</a>
 	Same as '':first-of-type:last-of-type''
 	or '':nth-of-type(1):nth-last-of-type(1)'',
 	but with a lower specificity.

selectors/Overview.html

@@ -2969,10 +2969,11 @@ <h4 class="heading settled" data-level=12.5.1 id=the-nth-of-type-pseudo><span cl
 <a class=css data-link-type=maybe href=#nth-of-type-pseudo title=:nth-of-type()>:nth-of-type()</a> pseudo-class</span><a class=self-link href=#the-nth-of-type-pseudo></a></h4>
 
 <p>The <dfn class=css data-dfn-type=selector data-export="" id=nth-of-type-pseudo title=:nth-of-type()>:nth-of-type(<var>An+B</var>)<a class=self-link href=#nth-of-type-pseudo></a></dfn> pseudo-class notation
-	represents an element that has <var>An+B</var>-1 siblings
-	with the same <a href=http://www.w3.org/TR/css3-namespace/#expanded-name>expanded element name</a>
-	<em>before</em> it in the document tree.
-	The CSS Syntax Module <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=CSS3SYN>[CSS3SYN]</a> defines the <a href=http://dev.w3.org/csswg/css-syntax/#anb><var>An+B</var> notation</a>.</p>
+	represents the <var>An+B</var>th element
+	with the same <a data-section="" href=#type-nmsp>namespace</a> and <a data-section="" href=#type-selectors>type</a>
+	among its siblings.</p>
+
+<p>The CSS Syntax Module <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=CSS3SYN>[CSS3SYN]</a> defines the <a href=http://dev.w3.org/csswg/css-syntax/#anb><var>An+B</var> notation</a>.</p>
 
 	<div class=example>
 		CSS example:
@@ -2993,10 +2994,12 @@ <h4 class="heading settled" data-level=12.5.2 id=the-nth-last-of-type-pseudo><sp
 <a class=css data-link-type=maybe href=#nth-last-of-type title=:nth-last-of-type()>:nth-last-of-type()</a> pseudo-class</span><a class=self-link href=#the-nth-last-of-type-pseudo></a></h4>
 
 <p>The <dfn class=css data-dfn-type=selector data-export="" id=nth-last-of-type title=:nth-last-of-type()>:nth-last-of-type(<var>An+B</var>)<a class=self-link href=#nth-last-of-type></a></dfn> pseudo-class notation
-	represents an element that has <var>An+B</var>-1 siblings
-	with the same <a href=http://www.w3.org/TR/css3-namespace/#expanded-name>expanded element name</a>
-	<em>after</em> it in the document tree.
-	The CSS Syntax Module <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=CSS3SYN>[CSS3SYN]</a> defines the <a href=http://dev.w3.org/csswg/css-syntax/#anb><var>An+B</var> notation</a>.</p>
+	represents the <var>An+B</var>th element
+	with the same <a data-section="" href=#type-nmsp>namespace</a> and <a data-section="" href=#type-selectors>type</a>
+	among its siblings,
+	counting backwards from the end.</p>
+
+<p>The CSS Syntax Module <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=CSS3SYN>[CSS3SYN]</a> defines the <a href=http://dev.w3.org/csswg/css-syntax/#anb><var>An+B</var> notation</a>.</p>
 
 	<div class=example>
 		Example:
@@ -3017,8 +3020,8 @@ <h4 class="heading settled" data-level=12.5.3 id=the-first-of-type-pseudo><span
 
 <p>The <dfn class=css data-dfn-type=selector data-export="" id=first-of-type-pseudo>:first-of-type<a class=self-link href=#first-of-type-pseudo></a></dfn> pseudo-class
 	represents an element that is the first sibling
-	with the same <a href=http://www.w3.org/TR/css3-namespace/#expanded-name>expanded element name</a>
-	in its sibling list.
+	with a particular <a data-section="" href=#type-nmsp>namespace</a> and <a data-section="" href=#type-selectors>type</a>
+	among its siblings.
 	Same as <span class=css>:nth-of-type(1)</span>.</p>
 
 	<div class=example>
@@ -3051,9 +3054,10 @@ <h4 class="heading settled" data-level=12.5.4 id=the-last-of-type-pseudo><span c
 <a class=css data-link-type=maybe href=#last-of-type-pseudo title=:last-of-type>:last-of-type</a> pseudo-class</span><a class=self-link href=#the-last-of-type-pseudo></a></h4>
 
 <p>The <dfn class=css data-dfn-type=selector data-export="" id=last-of-type-pseudo>:last-of-type<a class=self-link href=#last-of-type-pseudo></a></dfn> pseudo-class
-	represents an element that is the last sibling
-	with the same <a href=http://www.w3.org/TR/css3-namespace/#expanded-name>expanded element name</a>
-	in its sibling list.
+	represents an element that is the first sibling
+	with a particular <a data-section="" href=#type-nmsp>namespace</a> and <a data-section="" href=#type-selectors>type</a>
+	among its siblings,
+	counting backwards from the end.
 	Same as <span class=css>:nth-last-of-type(1)</span>.</p>
 
 	<div class=example>
@@ -3069,7 +3073,7 @@ <h4 class="heading settled" data-level=12.5.5 id=the-only-of-type-pseudo><span c
 
 <p>The <dfn class=css data-dfn-type=selector data-export="" id=only-of-type-pseudo>:only-of-type<a class=self-link href=#only-of-type-pseudo></a></dfn> pseudo-class
 	represents an element that has no siblings
-	with the same <a href=http://www.w3.org/TR/css3-namespace/#expanded-name>expanded element name</a>.
+	with the same <a data-section="" href=#type-nmsp>namespace</a> and <a data-section="" href=#type-selectors>type</a>
 	Same as <span class=css>:first-of-type:last-of-type</span>
 	or <span class=css>:nth-of-type(1):nth-last-of-type(1)</span>,
 	but with a lower specificity.</p>