@@ -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">
10791121The 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