@@ -1075,6 +1075,48 @@ The Matches-any Pseudo-class: '':matches()''</h3>
1075
1075
<pre> *|*:matches(*:hover, *:focus) </pre>
1076
1076
</div>
1077
1077
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
+
1078
1120
<h3 id="negation">
1079
1121
The Negation Pseudo-class: '':not()''</h3>
1080
1122
@@ -3067,6 +3109,8 @@ Calculating a selector's specificity</h2>
3067
3109
The specificity of a '':matches()'' pseudo-class is replaced by
3068
3110
the specificity of its selector list argument.
3069
3111
(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.
3070
3114
<li>
3071
3115
Similarly, the specificity of an '':nth-child()'' , '':nth-last-child()'' , '':nth-of-type()'' , or '':nth-last-of-type()'' selector
3072
3116
is the specificity of the pseudo class itself (counting as one pseudo-class selector)
@@ -3571,6 +3615,7 @@ Changes</h2>
3571
3615
Significant changes since the <a href="https://www.w3.org/TR/2013/WD-selectors4-20130502/">2 May 2013 Working Draft</a> include:
3572
3616
3573
3617
<ul>
3618
+ <li> Added '':is()'' pseudo-class.</li>
3574
3619
<li> Split out <a>relative selectors</a> from <a>scoped selectors</a> ,
3575
3620
as these are different concepts that can be independently invoked.
3576
3621
<li> Changed rules for absolutizing a relative selector.
0 commit comments