Skip to content

Commit

Permalink
[selectors-4] Add :is(), resolves #1170
Browse files Browse the repository at this point in the history
  • Loading branch information
LeaVerou committed Dec 1, 2017
1 parent 33ae097 commit 5948b1c
Showing 1 changed file with 45 additions and 0 deletions.
45 changes: 45 additions & 0 deletions selectors-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -1075,6 +1075,48 @@ The Matches-any Pseudo-class: '':matches()''</h3>
<pre>*|*:matches(*:hover, *:focus) </pre>
</div>

<h3 id="is">
The Specificity-adjustment Pseudo-class: '':is()''</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.

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

<div class="example">
Below is a common example where the specificity heuristic fails
to match author expectations:

<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:

<pre>
a:is(: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.

<h3 id="negation">
The Negation Pseudo-class: '':not()''</h3>

Expand Down Expand Up @@ -3067,6 +3109,8 @@ Calculating a selector's specificity</h2>
The specificity of a '':matches()'' pseudo-class is replaced by
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.
<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 Down Expand Up @@ -3571,6 +3615,7 @@ Changes</h2>
Significant changes since the <a href="https://www.w3.org/TR/2013/WD-selectors4-20130502/">2 May 2013 Working Draft</a> include:

<ul>
<li>Added '':is()'' pseudo-class.</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 5948b1c

Please sign in to comment.