:is() and :where()

Syntax

:is(selector-list)
:where(selector-list)

Examples

/* Without :is() */
header a:hover, main a:hover, footer a:hover { color: blue; }

/* With :is() - equivalent, more concise */
:is(header, main, footer) a:hover { color: blue; }

/* :is() takes on the highest specificity among its arguments */
:is(#sidebar, .content) p { color: gray; } /* behaves like #sidebar specificity */

/* :where() always contributes ZERO specificity - trivially overridable */
:where(#sidebar, .content) p { color: gray; } /* easy for any other rule to override */

Parameters and values

• :is() (pseudo-class): Matches any selector in the list, uses highest specificity among them
• :where() (pseudo-class): Matches any selector in the list, always contributes zero specificity

Best practices

• Use :is() to shorten repetitive selector lists that share a common descendant pattern
• Use :where() specifically for reset styles, base component styles, or CSS you expect (and want) other rules to easily override
• Remember :where() zero-specificity is a genuine tool for library/design-system authors, so consumers can override defaults without fighting specificity
• Both accept complex selector lists, including combinators, giving significant power in a compact syntax

At a glance

Purpose

Presentation and layout

File extension

.css

Runs in

Web browsers

Usually used with

HTML and JavaScript

Specifications & further reading

• CSS specifications (modules)

Related CSS documentation