Skip to content

[selectors4] :is() has specificity #3317

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Closed
wants to merge 1 commit into from
Closed

[selectors4] :is() has specificity #3317

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 32 additions & 29 deletions selectors-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ Selectors Overview</h2>
<td>[[#negation]]
<td>3/4
<tr>
<td><code>E:matches(<var>s1</var>, <var>s2</var>, &hellip;)</code>
<td><code>E:is(<var>s1</var>, <var>s2</var>, &hellip;)</code>
<td>an E element that matches <a>compound selector</a> <var>s1</var>
and/or <a>compound selector</a> <var>s2</var>
<td>[[#matches]]
Expand Down Expand Up @@ -913,7 +913,7 @@ Pseudo-classing Pseudo-elements</h4>
unless otherwise-specified, none of these <a>pseudo-classes</a>
will match on the <a>pseudo-element</a>.

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.

<div class="example">
For example, since the '':hover'' pseudo-class specifies
Expand Down Expand Up @@ -1108,31 +1108,31 @@ Selector Lists</h3>
</div>

<h3 id="matches">
The Matches-any Pseudo-class: '':matches()''</h3>
The Matches-any Pseudo-class: '':is()''</h3>

The matches-any pseudo-class, <dfn id='matches-pseudo'>:matches()</dfn>,
The matches-any pseudo-class, <dfn id='matches-pseudo'>:is()</dfn>,
is a functional pseudo-class taking a <a>selector list</a> 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
with a specificity of (0,1,1).
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 <a>compound selector</a>
representing the <a>subject</a> of any selector
within a '':matches()'' pseudo-class,
within a '':is()'' pseudo-class,
unless that compound selector contains
an explicit <a>universal selector</a> or <a>type selector</a>.

Expand All @@ -1142,15 +1142,16 @@ The Matches-any Pseudo-class: '':matches()''</h3>
is not limited to only matching elements in the default namespace
that are being hovered or focused.

<pre>*|*:matches(:hover, :focus) </pre>
<pre>*|*:is(:hover, :focus) </pre>

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:

<pre>*|*:matches(*:hover, *:focus) </pre>
<pre>*|*:is(*:hover, *:focus) </pre>
</div>

User agents may support '<code>:matches()</code>' as a deprecated name for '':is()''.

<h3 id="negation">
The Negation Pseudo-class: '':not()''</h3>
Expand All @@ -1164,7 +1165,7 @@ The Negation Pseudo-class: '':not()''</h3>

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(<var>argument</var>))''.
thus it has the exact behavior of '':not(:is(<var>argument</var>))''.
See [[#specificity-rules]].

Pseudo-elements cannot be represented by the negation pseudo-class;
Expand All @@ -1186,13 +1187,13 @@ The Negation Pseudo-class: '':not()''</h3>
<pre>html|*:not(:link):not(:visited)</pre>
</div>

As with '':matches()'',
As with '':is()'',
default namespace declarations do not affect the <a>compound selector</a>
representing the <a>subject</a> of any selector
within a '':not()'' pseudo-class,
unless that compound selector contains
an explicit <a>universal selector</a> or <a>type selector</a>.
(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,
Expand All @@ -1204,8 +1205,8 @@ The Specificity-adjustment Pseudo-class: '':where()''</h3>

The Specificity-adjustment pseudo-class, <dfn id="where-pseudo">:where()</dfn>,
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.

Expand Down Expand Up @@ -1982,7 +1983,7 @@ The Hyperlink Pseudo-class: '':any-link''</h3>
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
are hyperlinks, and thus match <code>:any-link</code>.
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)''.


<h3 id="link">
Expand Down Expand Up @@ -2407,7 +2408,7 @@ The Current-element Pseudo-class: '':current''</h3>
The <dfn id='current-pseudo'>:current</dfn> pseudo-class represents the
element, or an ancestor of the element, that is currently being displayed.

Its alternate form <dfn>:current()</dfn>, like '':matches()'',
Its alternate form <dfn>:current()</dfn>, like '':is()'',
takes a list of <a>compound selectors</a> 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
Expand Down Expand Up @@ -3314,7 +3315,7 @@ Calculating a selector's specificity</h2>

<ul>
<li>
The specificity of a '':matches'', '':not()'', or '':has()'' pseudo-class
The specificity of a '':is'', '':not()'', or '':has()'' pseudo-class
is replaced by the specificity of
the most specific complex selector in its selector list argument.
<li>
Expand All @@ -3330,7 +3331,7 @@ Calculating a selector's specificity</h2>
For example:
<ul>
<li>
'':matches(em, #foo)'' has
'':is(em, #foo)'' has
a specificity of (1,0,0)--
like an ID selector--
when matched against any of
Expand Down Expand Up @@ -3379,7 +3380,7 @@ Calculating a selector's specificity</h2>
LI.red.level /* a=0 b=2 c=1 */
#x34y /* a=1 b=0 c=0 */
#s12:not(FOO) /* a=1 b=0 c=1 */
.foo :matches(.bar, #baz)
.foo :is(.bar, #baz)
/* a=1 b=1 c=0 */
</pre>
</div>
Expand Down Expand Up @@ -3792,7 +3793,7 @@ Appendix A: Guidance on Mapping Source Documents &amp; Data to an Element Tree</
that must be explicitly defined.

Issue: Some pseudo-classes are *syntactical*,
like '':has()'' and '':matches()'',
like '':has()'' and '':is()'',
and thus should always work.
Need to indicate that somewhere.
Probably the structural pseudos always work
Expand Down Expand Up @@ -3912,11 +3913,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 matches-any selector to '':is()''.
(<a href="https://github.com/w3c/csswg-drafts/issues/3258">Issue 3258</a>)
<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()''
<li>Changed the specificity of '':is()'', '':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>
Expand All @@ -3925,7 +3928,7 @@ Changes</h2>

<ul>
<li>Added the '':target-within'', '':focus-within'', '':focus-visible'', '':playing'', and '':paused'' pseudo-classes.
<li>Added a zero-specificity '':matches()''-type pseudo-class, with name TBD.
<li>Added a zero-specificity '':is()''-type pseudo-class, with name TBD.
<li>Replaced subject indicator (''!'') feature with '':has()''.
<li>Replaced the '':nth-match()'' and '':nth-last-match()'' selectors
with '':nth-child(&hellip; of <var>selector</var>)'' and '':nth-last-child(&hellip; of <var>selector</var>)''.
Expand Down Expand Up @@ -3959,7 +3962,7 @@ Changes</h2>
</ul>
</li>
</ul>
<li>Removed restriction on combinators within '':matches()'' and '':not()'';
<li>Removed restriction on combinators within '':is()'' and '':not()'';
see <a href="https://lists.w3.org/Archives/Public/www-style/2014Jan/0607.html">discussion</a>.
<li>Defined <a>specificity</a> of a <a>selector list</a>. (Why?)
<li>Required quotes around '':lang()'' values involving an asterisk;
Expand All @@ -3973,9 +3976,9 @@ Changes</h2>

<ul>
<li>Added '':placeholder-shown'' pseudo-classes.
<li>Released some restrictions on '':matches()'' and '':not()''.
<li>Released some restrictions on '':is()'' and '':not()''.
<li>Defined fast and complete Selectors profiles (now called <a>live</a> and <a>snapshot</a>).
<li>Improved definition of <a>specificity</a> to better handle <a>:matches()</a>.
<li>Improved definition of <a>specificity</a> to better handle <a>:is()</a>.
<li>Updated grammar.
<li>Cleaned up definition of <<An+B>> notation.
<li>Added definition of <a>scope-relative</a> selectors, changed <i>scope-constrained</i> to scope-filtered for less confusion with scope-contained.
Expand Down