How the :is Pseudo‑Class Simplifies CSS and Cuts Redundant Code

In early web development, layouts relied on tables and hacks, but modern CSS now enables developers to write cross‑browser code more easily, create responsive designs, and produce smaller style sheets by eliminating redundancy.

Using :is to Reduce Repetitive Code

CSS often uses selector lists to apply the same styles to multiple selectors. For example:

<code>.nav-link:focus,
.nav-link:hover,
.nav-link[aria-current="page"] {}
</code>

Each selector repeats

.nav-link

. When selectors become longer, the duplication grows, as shown with

:not

:

<code>.button:not(.disabled):focus,
.button:not(.disabled):hover {}
</code>

In Sass, the ampersand (

&

) can reduce repetition:

<code>.nav-link {
  &amp;:focus,
  &amp;:hover,
  &amp;[aria-current="page"] {}
}
</code>

However, the compiled CSS still contains duplicated selectors. All major browsers now support the

:is

pseudo‑class, which accepts a comma‑separated list of selectors, allowing the same result with far less code.

Rewriting the first example with

:is

:

<code>.nav-link:is(:focus, :hover, [aria-current="page"]) {}
</code>

The selectors are merged into a single rule that is functionally equivalent to the original.

Similarly, the second example can be refactored:

<code>.button:not(.disabled):is(:focus, :hover) {}
</code>

Using

:is

eliminates the need to repeat any class or pseudo‑class.

In Sass,

:is

works nicely with the ampersand:

<code>.nav-link {
  /* base styling */
  &amp;:is(:focus, :hover, [aria-current="page"]) {
    /* active styling */
  }
}
</code>

:is

can also be used on its own to target direct descendants of multiple parent selectors:

<code>:is(.parent1, .parent2, .parent3) > * {}
</code>

Without

:is

, the same rule would require repetitive code:

<code>.parent1 > *,
.parent2 > *,
.parent3 > * {}
</code>

When using

:is

, two important aspects to consider are specificity and forgiving parsing.

Specificity

The specificity of

:is

is determined by the most specific selector in its list; all selectors share that specificity. In the first example, all selectors have equal specificity.

<code>.nav-link:is(:focus, :hover, [aria-current="page"]) {}
</code>

If an ID selector appears in the list, the overall specificity rises, causing lower‑specificity selectors to be overridden:

<code>div:is(#id, .class) {
  background: red;
}

div:is(.class, .another-class) {
  background: blue;
}
</code>

In this case, the

div

will be rendered red because the ID selector raises the rule’s priority.

Forgiving parsing

:is

uses forgiving selector parsing, so if one item in the list is invalid, the rest still apply. For example:

<code>.element:is(:focus, :unrecognized-selector) {}
</code>

The unrecognized selector is ignored, but

:focus

still receives the styles.

<code>.element :focus,
.element :unrecognized-selector {}
</code>

All major browsers now support

:is

. The current support matrix is shown below: