Skip to content

Commit

Permalink
[selectors4] :where() has 0 specificity
Browse files Browse the repository at this point in the history
The functional pseudo-class like :matches() with 0 specificity
is named :where().
w3c#2143 (comment)

resolves w3c#2143
  • Loading branch information
ericwilligers committed Oct 23, 2018
1 parent 7d63748 commit 44e2c65
Showing 1 changed file with 8 additions and 10 deletions.
18 changes: 8 additions & 10 deletions selectors-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ Selectors Overview</h2>
<td>[[#matches]]
<td>4
<tr>
<td><code>E:something(<var>s1</var>, <var>s2</var>, &hellip;)</code>
<td><code>E:where(<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> but contributes no specificity.
<td>[[#zero-matches]]
Expand Down Expand Up @@ -1199,20 +1199,18 @@ The Negation Pseudo-class: '':not()''</h3>


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

The Specificity-adjustment pseudo-class, <dfn id="something-pseudo">:something()</dfn>,
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 '':something'' pseudo-class, nor any of its arguments
Unlike '':matches()'', neither the '':where'' 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 the associated style declarations easy to override.

ISSUE: This pseudo-class needs a name. See <a href="https://github.com/w3c/csswg-drafts/issues/1170">previous discussion</a>, <a href="https://github.com/w3c/csswg-drafts/issues/2143">open issue</a>.

<div class="example">
Below is a common example where the specificity heuristic fails
to match author expectations:
Expand All @@ -1228,10 +1226,10 @@ The Specificity-adjustment Pseudo-class: '':something()''</h3>
}
</pre>

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

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

Expand Down Expand Up @@ -3332,7 +3330,7 @@ Calculating a selector's specificity</h2>
The specificity of a '':not()'' pseudo-class is replaced by
the specificity of the most specific complex selector in its selector list argument.
<li>
The specificity of a '':something()'' pseudo-class is replaced by zero.
The specificity of a '':where()'' pseudo-class is replaced by zero.
</ul>

<div class="example">
Expand All @@ -3343,7 +3341,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:something(em, #foo#bar#baz)'' has
''div:where(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

0 comments on commit 44e2c65

Please sign in to comment.