[selectors] Define specificity of :nth-child() etc. when containing a selector list; also redefine specificity of :matches() in terms of selector list specificity. Add examples for everything.

Author: fantasai

selectors/Overview.bs

@@ -3005,19 +3005,39 @@ Calculating a selector's specificity</h2>
 	this number is calculated for each selector in the list,
 	and the specificity of the entire selector is the largest of any individual selector in the list that matches the element.
 
-	In most cases, a selector has the same specificity for every element it applies to.
-	A few pseudo-classes, however, instead provide "evaluation contexts" for other selectors,
+	A few pseudo-classes provide "evaluation contexts" for other selectors,
 	and so have their specificity defined by their contents and how they match:
 
-	* The specificity of a '':matches()'' pseudo-class
-		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 '':matches()''.)
-	* The specificity of a '':not()'' pseudo-class
-		is the specificity of the most specific complex selector in its selector list.
-		Within a '':not()'', the '':matches()'' pseudo-class has the highest specificity of any of its arguments.
+	<ul>
+		<li>
+			The specificity of a '':matches()'' pseudo-class is replaced by
+			the specificity of its selector list argument.
+			(The full selector's specificity is equivalent to expanding out all the combinations in full, without '':matches()''.)
+		<li>
+			Similarly, the specificity of an '':nth-child()'', '':nth-last-child()'', '':nth-of-type()'', or '':nth-last-of-type()'' selector
+		  is the specificity of the pseudo class itself (counting as one pseudo-class selector)
+		  plus the specificity of its selector list argument (if any).
+		<li>
+			The specificity of a '':not()'' pseudo-class is replaced by
+		 	the specificity of the most specific complex selector in its selector list argument.
+	</ul>
 
-	In either case, the pseudo-class itself does not contribute any additional specificity.
-	For example, '':matches(em, strong)'' has a specificity of (0,0,1), like a tag selector.
+	<div class="example">
+		For example:
+		<ul>
+			<li>
+				'':matches(em, #foo)'' has
+				a specificity of (0,0,1)--like a tag selector--when matched against <code>&lt;em></code>,
+				and a specificity of (1,0,0)--like an ID selector--when matched against  <code>&lt;em id=foo></code>.
+			<li>
+				'':nth-child(even of li, .item)'' has
+				a specificity of (0,1,1)--like a tag selector plus a pseudo-class--when matched against <code>&lt;li></code>,
+				and a specificity of (0,2,0)--like a class selector plus a pseudo-class--when matched against  <code>&lt;li class=item id=foo></code>.
+			<li>
+				'':not(em, #foo)'' has
+				a specificity of (1,0,0)--like an ID selector--whenever it matches any element.
+		</ul>
+	</div>
 
 	Specificities are compared by comparing the three components in order:
 	the specificity with a larger <var>A</var> value is more specific;