Skip to content

Commit 5948b1c

Browse files
committed
[selectors-4] Add :is(), resolves #1170
1 parent 33ae097 commit 5948b1c

File tree

1 file changed

+45
-0
lines changed

1 file changed

+45
-0
lines changed

selectors-4/Overview.bs

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1075,6 +1075,48 @@ The Matches-any Pseudo-class: '':matches()''</h3>
10751075
<pre>*|*:matches(*:hover, *:focus) </pre>
10761076
</div>
10771077

1078+
<h3 id="is">
1079+
The Specificity-adjustment Pseudo-class: '':is()''</h3>
1080+
1081+
The Specificity-adjustment pseudo-class '':is()'', is a functional pseudo-class
1082+
with the same syntax and functionality as '':matches()''.
1083+
Unlike '':matches()'', neither the pseudo-class, nor any of its arguments
1084+
contribute to the specificity of the selector.
1085+
1086+
This is useful for introducing filters in a selector while keeping it easy to override.
1087+
1088+
<div class="example">
1089+
Below is a common example where the specificity heuristic fails
1090+
to match author expectations:
1091+
1092+
<pre>
1093+
a:not(:hover) {
1094+
text-decoration: none;
1095+
}
1096+
1097+
nav a {
1098+
/* Has no effect */
1099+
text-decoration: underline;
1100+
}
1101+
</pre>
1102+
1103+
However, by using '':is()'' the author can explicitly declare their intent:
1104+
1105+
<pre>
1106+
a:is(:not(:hover)) {
1107+
text-decoration: none;
1108+
}
1109+
1110+
nav a {
1111+
/* Works now! */
1112+
text-decoration: underline;
1113+
}
1114+
</pre>
1115+
</div>
1116+
1117+
Note: Future versions of this specification may introduce a second argument to explicitly set
1118+
the specificity of each instance of this pseudo-class, which will default to zero.
1119+
10781120
<h3 id="negation">
10791121
The Negation Pseudo-class: '':not()''</h3>
10801122

@@ -3067,6 +3109,8 @@ Calculating a selector's specificity</h2>
30673109
The specificity of a '':matches()'' pseudo-class is replaced by
30683110
the specificity of its selector list argument.
30693111
(The full selector's specificity is equivalent to expanding out all the combinations in full, without '':matches()''.)
3112+
<li>
3113+
The specificity of an '':is()'' pseudo-class is replaced by 0.
30703114
<li>
30713115
Similarly, the specificity of an '':nth-child()'', '':nth-last-child()'', '':nth-of-type()'', or '':nth-last-of-type()'' selector
30723116
is the specificity of the pseudo class itself (counting as one pseudo-class selector)
@@ -3571,6 +3615,7 @@ Changes</h2>
35713615
Significant changes since the <a href="https://www.w3.org/TR/2013/WD-selectors4-20130502/">2 May 2013 Working Draft</a> include:
35723616

35733617
<ul>
3618+
<li>Added '':is()'' pseudo-class.</li>
35743619
<li>Split out <a>relative selectors</a> from <a>scoped selectors</a>,
35753620
as these are different concepts that can be independently invoked.
35763621
<li>Changed rules for absolutizing a relative selector.

0 commit comments

Comments
 (0)