From 7e03d8187518443c1680a6c564386a81f169ce20 Mon Sep 17 00:00:00 2001 From: Eric Willigers Date: Thu, 15 Nov 2018 05:01:14 +1100 Subject: [PATCH] [selectors4] :is() has specificity The functional pseudo-class like :where() but with specificity is named :is() instead of :matches(). https://github.com/w3c/csswg-drafts/issues/3258#issuecomment-438742190 resolves #3258 --- selectors-4/Overview.bs | 61 +++++++++++++++++++++-------------------- 1 file changed, 32 insertions(+), 29 deletions(-) diff --git a/selectors-4/Overview.bs b/selectors-4/Overview.bs index 5873b4f4ac5..39333419caf 100644 --- a/selectors-4/Overview.bs +++ b/selectors-4/Overview.bs @@ -133,7 +133,7 @@ Selectors Overview [[#negation]] 3/4 - E:matches(s1, s2, …) + E:is(s1, s2, …) an E element that matches compound selector s1 and/or compound selector s2 [[#matches]] @@ -913,7 +913,7 @@ Pseudo-classing Pseudo-elements unless otherwise-specified, none of these pseudo-classes will match on the pseudo-element. - Issue: Clarify that '':not()'' and '':matches()'' can be used when containing above-mentioned pseudos. + Issue: Clarify that '':not()'' and '':is()'' can be used when containing above-mentioned pseudos.
For example, since the '':hover'' pseudo-class specifies @@ -1108,19 +1108,19 @@ Selector Lists

-The Matches-any Pseudo-class: '':matches()''

+The Matches-any Pseudo-class: '':is()'' - The matches-any pseudo-class, :matches(), + The matches-any pseudo-class, :is(), is a functional pseudo-class taking a selector list as its argument. It represents an element that is represented by its argument. - Note: The specificity of the '':matches()'' pseudo-class + Note: The specificity of the '':is()'' pseudo-class is replaced by the specificity of its most specific argument. - Thus, a selector written with '':matches()'' + Thus, a selector written with '':is()'' does not necessarily have equivalent specificity - to the equivalent selector written without '':matches()'' + to the equivalent selector written without '':is()'' For example, if we have - '':matches(ul, ol, .list) > [hidden]'' and ''ul > [hidden], ol > [hidden], .list > [hidden]'' + '':is(ul, ol, .list) > [hidden]'' and ''ul > [hidden], ol > [hidden], .list > [hidden]'' a ''[hidden]]'' child of an <{ol}> matches the first selector with a specificity of (0,2,0) whereas it matches the second selector @@ -1128,11 +1128,11 @@ The Matches-any Pseudo-class: '':matches()'' See [[#specificity-rules]]. Pseudo-elements cannot be represented by the matches-any pseudo-class; - they are not valid within '':matches()''. + they are not valid within '':is()''. Default namespace declarations do not affect the compound selector representing the subject of any selector - within a '':matches()'' pseudo-class, + within a '':is()'' pseudo-class, unless that compound selector contains an explicit universal selector or type selector. @@ -1142,15 +1142,16 @@ The Matches-any Pseudo-class: '':matches()'' is not limited to only matching elements in the default namespace that are being hovered or focused. - 
*|*:matches(:hover, :focus)
+ 
*|*:is(:hover, :focus)
The following selector, however, represents only hovered or focused elements that are in the default namespace, because it uses an explicit - universal selector within the '':matches()'' notation: + universal selector within the '':is()'' notation: - 
*|*:matches(*:hover, *:focus)
+ 
*|*:is(*:hover, *:focus)
+ User agents may support ':matches()' as a deprecated name for '':is()''.

The Negation Pseudo-class: '':not()''

@@ -1164,7 +1165,7 @@ The Negation Pseudo-class: '':not()'' Note: The specificity of the '':not()'' pseudo-class is replaced by the specificity of the most specific selector in its argument; - thus it has the exact behavior of '':not(:matches(argument))''. + thus it has the exact behavior of '':not(:is(argument))''. See [[#specificity-rules]]. Pseudo-elements cannot be represented by the negation pseudo-class; @@ -1186,13 +1187,13 @@ The Negation Pseudo-class: '':not()'' 
html|*:not(:link):not(:visited)
- As with '':matches()'', + As with '':is()'', default namespace declarations do not affect the compound selector representing the subject of any selector within a '':not()'' pseudo-class, unless that compound selector contains an explicit universal selector or type selector. - (See '':matches()'' for examples.) + (See '':is()'' for examples.) Note: The '':not()'' pseudo-class allows useless selectors to be written. For instance '':not(*|*)'', which represents no element at all, @@ -1204,8 +1205,8 @@ The Specificity-adjustment Pseudo-class: '':where()'' The Specificity-adjustment pseudo-class, :where(), is a functional pseudo-class - with the same syntax and functionality as '':matches()''. - Unlike '':matches()'', neither the '':where'' pseudo-class, nor any of its arguments + with the same syntax and functionality as '':is()''. + Unlike '':is()'', neither the '':where'' pseudo-class, nor any of its arguments contribute to the specificity of the selector-- its specificity is always zero. @@ -1982,7 +1983,7 @@ The Hyperlink Pseudo-class: '':any-link'' For example, in [[HTML5]], any a, area, or link elements with an href attribute are hyperlinks, and thus match :any-link. It matches an element if the element would match either '':link'' or '':visited'', - and is equivalent to '':matches(:link, :visited)''. + and is equivalent to '':is(:link, :visited)''. The :current pseudo-class represents the element, or an ancestor of the element, that is currently being displayed. - Its alternate form :current(), like '':matches()'', + Its alternate form :current(), like '':is()'', takes a list of compound selectors as its argument: it represents the '':current'' element that matches the argument or, if that does not match, the innermost ancestor of the '':current'' element @@ -3314,7 +3315,7 @@ Calculating a selector's specificity