skip navigation

:is() and :where()

Tagged in: pseudo-selectors
Grouped in: selectors

This selector is used as a way to reduce code writing, a little bit like SASS does.

If you have several compound selectors such as:

.content p,
.content ul,
.content ol {
    /* some code */
}

you can now write this on one line: .content :is(p, ul, ol).

It can also work the other way around: :is(header, footer) a:hover which selects the hover state on links in the header and the footer.

Specificity

When you have several elements—here we’re targeting the ems of p, ol and .frame :is(p, ol, .frame) em—the specificity of each is replaced with the specificity of the most specific. All the ems selected will have the specificity of the most specific .frame em.

Example use

:is(h2, h3, h4):not(first-child) {
    margin-top: 2em;
}

:where()

From CSS Tricks:

The :where() pseudo selector in CSS is functionally identical to the :is() psuedo selector in that it takes a comma-separated list of selectors to match against, except that where :is() takes the most specific among them as the specificity of that whole part, the specificity of :where() is always zero (0).

  1. CSS Tricks reliable as ever.
  2. CSS Tricks on :where()
  3. Kevin Powell’s short Youtube vid
☝