[selectors-4] Make specificity of :matches(), :has(), and :nth-child() not depend on matching. (Use most specific argument, like :not().) #1027 (comment)

Author: fantasai

selectors-4/Overview.bs

@@ -1115,14 +1115,17 @@ The Matches-any Pseudo-class: '':matches()''</h3>
 	It represents an element that is represented by its argument.
 
 	Note: The specificity of the '':matches()'' pseudo-class
-	is replaced by the specificity of its argument.
-	Thus, a selector written with '':matches()'' has equivalent specificity
+	is replaced by the specificity of its most specific argument.
+	Thus, a selector written with '':matches()''
+	does not necessarily have equivalent specificity
 	to the equivalent selector written without '':matches()''
-	For example,
+	For example, if we have
 	'':matches(ul, ol, .list) > [hidden]'' and ''ul > [hidden], ol > [hidden], .list > [hidden]''
-	are equivalent in both their matching behavior and specificity.
+	a ''[hidden]]'' child of an <{ol}> matches the first selector
+	with a specificity of (0,2,0)
+	whereas it matches the second selector
+	with a specificity of (0,1,1).
 	See [[#specificity-rules]].
-	ISSUE: See also <a href="https://github.com/w3c/csswg-drafts/issues/1027">issue 1027</a>.
 
 	Pseudo-elements cannot be represented by the matches-any pseudo-class;
 	they are not valid within '':matches()''.
@@ -1133,8 +1136,6 @@ The Matches-any Pseudo-class: '':matches()''</h3>
 	unless that compound selector contains
 	an explicit <a>universal selector</a> or <a>type selector</a>.
 
-	Issue: Why this exception for the explicit universal selector?
-
 	<div class="example">
 		For example, the following selector matches any element that is being
 		hovered or focused, regardless of its namespace. In particular, it
@@ -2807,8 +2808,9 @@ Child-indexed Pseudo-classes</h3>
 	</div>
 
 	Note: The specificity of the '':nth-child()'' pseudo-class is
-	the specificity of a single pseudo-class plus
-	the specificity of its selector argument <var>S</var>, if any.
+	the specificity of a single pseudo-class plus,
+	if <var>S</var> is specified,
+	the specificity of the most specific <a>complex selector</a> in <var>S</var>.
 	See [[#specificity-rules]].
 	Thus ''<var>S</var>:nth-child(<var>An+B</var>)''
 	and '':nth-child(<var>An+B</var> of <var>S</var>)''
@@ -3310,25 +3312,16 @@ Calculating a selector's specificity</h2>
 	A few pseudo-classes provide “evaluation contexts” for other selectors,
 	and so have their specificity defined by their contents and how they match:
 
-	ISSUE: See also <a href="https://github.com/w3c/csswg-drafts/issues/1027">issue 1027</a>.
-
 	<ul>
 		<li>
-			The specificity of a '':matches()'' or '':has()'' pseudo-class is replaced by
-			the specificity applicable to its selector list argument.
-			(When '':matches()'' contains only compound selectors,
-			the full selector's specificity is thus equivalent to
-			expanding out all the combinations in full, without '':matches()'';
-			fully generalized, the specificity of '':matches()'' is
-			the specificity of the most specific selector within it that matches.
-			The behavior for comma-separated arguments to '':has()'' is analogous.)
+			The specificity of a '':matches'', '':not()'', or '':has()'' pseudo-class
+			is replaced by the specificity of
+			the most specific complex selector in its selector list argument.
 		<li>
 			Analogously, the specificity of an '':nth-child()'' or '':nth-last-child()'' 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.
+			plus the specificity of
+			the most specific complex selector in its selector list argument (if any).
 		<li>
 			The specificity of a '':where()'' pseudo-class is replaced by zero.
 	</ul>
@@ -3338,18 +3331,25 @@ Calculating a selector's specificity</h2>
 		<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>.
+				a specificity of (1,0,0)--
+				like an ID selector--
+				when matched against any of
+				<code>&lt;em></code>, <code>&lt;p id=foo></code>, or <code>&lt;em id=foo></code>.
 			<li>
 				''div:where(em, #foo#bar#baz)'' has
-				a specificity of (0,0,1): only the ''div'' contributes to selector specificity.
+				a specificity of (0,0,1):
+				only the ''div'' outside the '':where()''
+				contributes to selector specificity.
 			<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>.
+				a specificity of (0,2,0)--
+				like a class selector plus a pseudo-class--
+				when matched against any of
+				 <code>&lt;li></code>, <code>&lt;ul class=item></code>, or <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.
+				a specificity of (1,0,0)--like an ID selector--
+				whenever it matches any element.
 		</ul>
 	</div>
 
@@ -3380,17 +3380,16 @@ Calculating a selector's specificity</h2>
 		#x34y           /* a=1 b=0 c=0 */
 		#s12:not(FOO)   /* a=1 b=0 c=1 */
 		.foo :matches(.bar, #baz)
-		                /* Either a=1 b=1 c=0
-		                   or a=0 b=2 c=0, depending
-		                   on the element being matched. */
+		                /* a=1 b=1 c=0 */
 		</pre>
 	</div>
 
 	Note: Repeated occurrences of the
 	same simple selector are allowed and do increase specificity.
 
 	Note: The specificity of the styles
-	specified in an HTML <code>style</code> attribute <a href="https://www.w3.org/TR/css-style-attr/#interpret">is described in CSS Style Attributes</a>. [[CSSSTYLEATTR]]
+	specified in an HTML <code>style</code> attribute
+	<a href="https://www.w3.org/TR/css-style-attr/#interpret">is described in CSS Style Attributes</a>. [[CSSSTYLEATTR]]
 
 <h2 id="grammar" oldids="formal-syntax">
 Grammar</h2>
@@ -3913,8 +3912,13 @@ Changes</h2>
 	Significant changes since the <a href="https://www.w3.org/TR/2018/WD-selectors-4-20180202/">2 February 2018 Working Draft</a>:
 
 	<ul>
+		<li>Named the zero-specificity selector to '':where()''.
+		(<a href="https://github.com/w3c/csswg-drafts/issues/2143">Issue 2143</a>)
 		<li>Removed '':blank'' and defined '':empty'' to ignored white-space&ndash;only nodes.
 		(<a href="https://github.com/w3c/csswg-drafts/issues/1967">Issue 1967</a>)
+		<li>Changed the specificity of '':matches()'', '':where()'', and '':nth-child()''
+		to not depend on which selector argument matched.
+		(<a href="https://github.com/w3c/csswg-drafts/issues/1027">Issue 1027</a>)
 	</ul>
 
 	Significant changes since the <a href="https://www.w3.org/TR/2013/WD-selectors4-20130502/">2 May 2013 Working Draft</a> include: