@@ -133,7 +133,7 @@ Selectors Overview</h2>
133133 <td> [[#negation]]
134134 <td> 3/4
135135 <tr>
136- <td><code> E:matches (<var> s1</var> , <var> s2</var> , …)</code>
136+ <td><code> E:is (<var> s1</var> , <var> s2</var> , …)</code>
137137 <td> an E element that matches <a>compound selector</a> <var> s1</var>
138138 and/or <a>compound selector</a> <var> s2</var>
139139 <td> [[#matches]]
@@ -913,7 +913,7 @@ Pseudo-classing Pseudo-elements</h4>
913913 unless otherwise-specified, none of these <a>pseudo-classes</a>
914914 will match on the <a>pseudo-element</a> .
915915
916- Issue: Clarify that '':not()'' and '':matches ()'' can be used when containing above-mentioned pseudos.
916+ Issue: Clarify that '':not()'' and '':is ()'' can be used when containing above-mentioned pseudos.
917917
918918 <div class="example">
919919 For example, since the '':hover'' pseudo-class specifies
@@ -1108,31 +1108,31 @@ Selector Lists</h3>
11081108 </div>
11091109
11101110<h3 id="matches">
1111- The Matches-any Pseudo-class: '':matches ()''</h3>
1111+ The Matches-Any Pseudo-class: '':is ()''</h3>
11121112
1113- The matches-any pseudo-class, <dfn id='matches-pseudo'>:matches ()</dfn> ,
1113+ The matches-any pseudo-class, <dfn id='matches-pseudo'>:is ()</dfn> ,
11141114 is a functional pseudo-class taking a <a>selector list</a> as its argument.
11151115 It represents an element that is represented by its argument.
11161116
1117- Note: The specificity of the '':matches ()'' pseudo-class
1117+ Note: The specificity of the '':is ()'' pseudo-class
11181118 is replaced by the specificity of its most specific argument.
1119- Thus, a selector written with '':matches ()''
1119+ Thus, a selector written with '':is ()''
11201120 does not necessarily have equivalent specificity
1121- to the equivalent selector written without '':matches ()''
1121+ to the equivalent selector written without '':is ()''
11221122 For example, if we have
1123- '':matches (ul, ol, .list) > [hidden]'' and ''ul > [hidden], ol > [hidden], .list > [hidden]''
1123+ '':is (ul, ol, .list) > [hidden]'' and ''ul > [hidden], ol > [hidden], .list > [hidden]''
11241124 a ''[hidden]]'' child of an <{ol}> matches the first selector
11251125 with a specificity of (0,2,0)
11261126 whereas it matches the second selector
11271127 with a specificity of (0,1,1).
11281128 See [[#specificity-rules]] .
11291129
11301130 Pseudo-elements cannot be represented by the matches-any pseudo-class;
1131- they are not valid within '':matches ()'' .
1131+ they are not valid within '':is ()'' .
11321132
11331133 Default namespace declarations do not affect the <a>compound selector</a>
11341134 representing the <a>subject</a> of any selector
1135- within a '':matches ()'' pseudo-class,
1135+ within a '':is ()'' pseudo-class,
11361136 unless that compound selector contains
11371137 an explicit <a>universal selector</a> or <a>type selector</a> .
11381138
@@ -1142,18 +1142,23 @@ The Matches-any Pseudo-class: '':matches()''</h3>
11421142 is not limited to only matching elements in the default namespace
11431143 that are being hovered or focused.
11441144
1145- <pre> *|*:matches (:hover, :focus) </pre>
1145+ <pre> *|*:is (:hover, :focus) </pre>
11461146
11471147 The following selector, however, represents only hovered or focused
11481148 elements that are in the default namespace, because it uses an explicit
1149- universal selector within the '':matches ()'' notation:
1149+ universal selector within the '':is ()'' notation:
11501150
1151- <pre> *|*:matches (*:hover, *:focus) </pre>
1151+ <pre> *|*:is (*:hover, *:focus) </pre>
11521152 </div>
11531153
1154+ As previous drafts of this specification
1155+ used the name <dfn>:matches()</dfn> for this pseudo-class,
1156+ UAs may additionally implement this obsolete name
1157+ as an alias for '':is()''
1158+ if needed for backwards-compatibility.
11541159
11551160<h3 id="negation">
1156- The Negation Pseudo-class: '':not()''</h3>
1161+ The Negation (Matches-None) Pseudo-class: '':not()''</h3>
11571162
11581163 The negation pseudo-class, <dfn id='negation-pseudo'>:not()</dfn> ,
11591164 is a functional pseudo-class taking a <a>selector list</a> as an argument.
@@ -1164,7 +1169,7 @@ The Negation Pseudo-class: '':not()''</h3>
11641169
11651170 Note: The specificity of the '':not()'' pseudo-class
11661171 is replaced by the specificity of the most specific selector in its argument;
1167- thus it has the exact behavior of '':not(:matches (<var>argument</var>))'' .
1172+ thus it has the exact behavior of '':not(:is (<var>argument</var>))'' .
11681173 See [[#specificity-rules]] .
11691174
11701175 Pseudo-elements cannot be represented by the negation pseudo-class;
@@ -1186,13 +1191,13 @@ The Negation Pseudo-class: '':not()''</h3>
11861191 <pre> html|*:not(:link):not(:visited)</pre>
11871192 </div>
11881193
1189- As with '':matches ()'' ,
1194+ As with '':is ()'' ,
11901195 default namespace declarations do not affect the <a>compound selector</a>
11911196 representing the <a>subject</a> of any selector
11921197 within a '':not()'' pseudo-class,
11931198 unless that compound selector contains
11941199 an explicit <a>universal selector</a> or <a>type selector</a> .
1195- (See '':matches ()'' for examples.)
1200+ (See '':is ()'' for examples.)
11961201
11971202 Note: The '':not()'' pseudo-class allows useless selectors to be written.
11981203 For instance '':not(*|*)'' , which represents no element at all,
@@ -1204,8 +1209,8 @@ The Specificity-adjustment Pseudo-class: '':where()''</h3>
12041209
12051210 The Specificity-adjustment pseudo-class, <dfn id="where-pseudo">:where()</dfn> ,
12061211 is a functional pseudo-class
1207- with the same syntax and functionality as '':matches ()'' .
1208- Unlike '':matches ()'' , neither the '':where'' pseudo-class, nor any of its arguments
1212+ with the same syntax and functionality as '':is ()'' .
1213+ Unlike '':is ()'' , neither the '':where'' pseudo-class, nor any of its arguments
12091214 contribute to the specificity of the selector--
12101215 its specificity is always zero.
12111216
@@ -1982,7 +1987,7 @@ The Hyperlink Pseudo-class: '':any-link''</h3>
19821987 For example, in [[HTML5]] , any <a element>a</a> , <a element>area</a> , or <a element>link</a> elements with an <code> href</code> attribute
19831988 are hyperlinks, and thus match <code> :any-link</code> .
19841989 It matches an element if the element would match either '':link'' or '':visited'' ,
1985- and is equivalent to '':matches (:link, :visited)'' .
1990+ and is equivalent to '':is (:link, :visited)'' .
19861991
19871992
19881993<h3 id="link">
@@ -2407,7 +2412,7 @@ The Current-element Pseudo-class: '':current''</h3>
24072412 The <dfn id='current-pseudo'>:current</dfn> pseudo-class represents the
24082413 element, or an ancestor of the element, that is currently being displayed.
24092414
2410- Its alternate form <dfn>:current()</dfn> , like '':matches ()'' ,
2415+ Its alternate form <dfn>:current()</dfn> , like '':is ()'' ,
24112416 takes a list of <a>compound selectors</a> as its argument: it represents the
24122417 '':current'' element that matches the argument or, if that does
24132418 not match, the innermost ancestor of the '':current'' element
@@ -3314,7 +3319,7 @@ Calculating a selector's specificity</h2>
33143319
33153320 <ul>
33163321 <li>
3317- The specificity of a '':matches '' , '':not()'' , or '':has()'' pseudo-class
3322+ The specificity of a '':is '' , '':not()'' , or '':has()'' pseudo-class
33183323 is replaced by the specificity of
33193324 the most specific complex selector in its selector list argument.
33203325 <li>
@@ -3330,7 +3335,7 @@ Calculating a selector's specificity</h2>
33303335 For example:
33313336 <ul>
33323337 <li>
3333- '':matches (em, #foo)'' has
3338+ '':is (em, #foo)'' has
33343339 a specificity of (1,0,0)--
33353340 like an ID selector--
33363341 when matched against any of
@@ -3379,7 +3384,7 @@ Calculating a selector's specificity</h2>
33793384 LI.red.level /* a=0 b=2 c=1 */
33803385 #x34y /* a=1 b=0 c=0 */
33813386 #s12:not(FOO) /* a=1 b=0 c=1 */
3382- .foo :matches (.bar, #baz)
3387+ .foo :is (.bar, #baz)
33833388 /* a=1 b=1 c=0 */
33843389 </pre>
33853390 </div>
@@ -3792,7 +3797,7 @@ Appendix A: Guidance on Mapping Source Documents & Data to an Element Tree</
37923797 that must be explicitly defined.
37933798
37943799 Issue: Some pseudo-classes are *syntactical*,
3795- like '':has()'' and '':matches ()'' ,
3800+ like '':has()'' and '':is ()'' ,
37963801 and thus should always work.
37973802 Need to indicate that somewhere.
37983803 Probably the structural pseudos always work
@@ -3914,9 +3919,11 @@ Changes</h2>
39143919 <ul>
39153920 <li> Named the zero-specificity selector to '':where()'' .
39163921 (<a href="https://github.com/w3c/csswg-drafts/issues/2143">Issue 2143</a> )
3922+ <li> Renamed '':matches()'' to '':is()'' .
3923+ (<a href="https://github.com/w3c/csswg-drafts/issues/3258">Issue 3258</a> )
39173924 <li> Removed '':blank'' and defined '':empty'' to ignored white-space–only nodes.
39183925 (<a href="https://github.com/w3c/csswg-drafts/issues/1967">Issue 1967</a> )
3919- <li> Changed the specificity of '':matches ()'' , '':where()'' , and '':nth-child()''
3926+ <li> Changed the specificity of '':is ()'' , '':where()'' , and '':nth-child()''
39203927 to not depend on which selector argument matched.
39213928 (<a href="https://github.com/w3c/csswg-drafts/issues/1027">Issue 1027</a> )
39223929 </ul>
0 commit comments