Skip to content

Commit

Permalink
[selectors-4] Make it clear that the name of the zero-specificity :ma…
Browse files Browse the repository at this point in the history
…tches() pseudo is not decided. #1170
  • Loading branch information
fantasai committed Dec 28, 2017
1 parent 9d2be85 commit 9a01521
Showing 1 changed file with 44 additions and 38 deletions.
82 changes: 44 additions & 38 deletions selectors-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -132,10 +132,10 @@ Selectors Overview</h2>
<td>[[#matches]]
<td>4
<tr>
<td><code>E:is(<var>s1</var>, <var>s2</var>)</code>
<td><code>E:something(<var>s1</var>, <var>s2</var>)</code>
<td>an E element that matches <a>compound selector</a> <var>s1</var>
and/or <a>compound selector</a> <var>s2</var> but contributes no specificity.
<td>[[#is]]
<td>[[#zero-matches]]
<td>4
<tr>
<td><code>E:has(<var>rs1</var>, <var>rs2</var>)</code>
Expand Down Expand Up @@ -1091,47 +1091,53 @@ The Matches-any Pseudo-class: '':matches()''</h3>
<pre>*|*:matches(*:hover, *:focus) </pre>
</div>

<h3 id="is">
The Specificity-adjustment Pseudo-class: '':is()''</h3>
<h3 id="zero-matches">
The Specificity-adjustment Pseudo-class: '':something()''</h3>

The Specificity-adjustment pseudo-class '':is()'', is a functional pseudo-class
with the same syntax and functionality as '':matches()''.
Unlike '':matches()'', neither the pseudo-class, nor any of its arguments
contribute to the specificity of the selector.
The Specificity-adjustment pseudo-class, <dfn id="something-pseudo">'':something()''</dfn>,
is a functional pseudo-class
with the same syntax and functionality as '':matches()''.
Unlike '':matches()'', neither the pseudo-class, nor any of its arguments
contribute to the specificity of the selector--
its specificity is always zero.

This is useful for introducing filters in a selector while keeping it easy to override.
This is useful for introducing filters in a selector
while keeping the associated style declarations easy to override.

<div class="example">
Below is a common example where the specificity heuristic fails
to match author expectations:
ISSUE: This pseudo-class needs a name. See <a href="https://github.com/w3c/csswg-drafts/issues/1170">discussion</a>.

<pre>
a:not(:hover) {
text-decoration: none;
}
<div class="example">
Below is a common example where the specificity heuristic fails
to match author expectations:

nav a {
/* Has no effect */
text-decoration: underline;
}
</pre>
<pre>
a:not(:hover) {
text-decoration: none;
}

nav a {
/* Has no effect */
text-decoration: underline;
}
</pre>

However, by using '':is()'' the author can explicitly declare their intent:
However, by using '':something()'' the author can explicitly declare their intent:

<pre>
a:is(:not(:hover)) {
text-decoration: none;
}

nav a {
/* Works now! */
text-decoration: underline;
}
</pre>
</div>
<pre>
a:something(:not(:hover)) {
text-decoration: none;
}

nav a {
/* Works now! */
text-decoration: underline;
}
</pre>
</div>

Note: Future versions of this specification may introduce a second argument to explicitly set
the specificity of each instance of this pseudo-class, which will default to zero.
Note: Future versions of this specification may introduce a second argument
to explicitly set the specificity of each instance of this pseudo-class,
which will default to zero.

<h3 id="negation">
The Negation Pseudo-class: '':not()''</h3>
Expand Down Expand Up @@ -3135,7 +3141,7 @@ Calculating a selector's specificity</h2>
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>
The specificity of an '':is()'' pseudo-class is replaced by 0.
The specificity of an '':something()'' pseudo-class is replaced by 0.
<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)
Expand All @@ -3153,7 +3159,7 @@ Calculating a selector's specificity</h2>
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>
''div:is(em, #foo#bar#baz)'' has
''div:something(em, #foo#bar#baz)'' has
a specificity of (0,0,1): only the ''div'' contributes to selector specificity.
<li>
'':nth-child(even of li, .item)'' has
Expand Down Expand Up @@ -3644,7 +3650,7 @@ Changes</h2>

<ul>
<li>Added '':target-within''</li>
<li>Added '':is()'' pseudo-class.</li>
<li>Added a zero-specificity '':matches()''-type pseudo-class, with name TBD.</li>
<li>Split out <a>relative selectors</a> from <a>scoped selectors</a>,
as these are different concepts that can be independently invoked.
<li>Changed rules for absolutizing a relative selector.
Expand Down

0 comments on commit 9a01521

Please sign in to comment.