CSS :is() (:matches(), :any()) Selector

Note: :matches() was renamed to :is().

:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

Meaning

The :is() selector function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.

This is useful for writing large selectors in a more compact form.

Also see any(), matches() selectors.

Version: CSS3

Standard Syntax

:is(forgivingSelectorList) {
  css declarations;
}

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Status

Difference between :is() and :where()

The difference between the two is that :is() counts towards the specificity of the overall selector (it takes the specificity of its most specific argument), whereas :where() has a specificity value of 0.

Ignoring

When using :is() or :where() instead of the whole list of selectors being deemed invalid if one fails to parse, the incorrect or unsupported selector will be ignored and the others used.

:is(input:invalid, input:unsupported) {
  border: 1px solid red;
}

:is(input:valid,input:unsupported) {
  border: 1px solid green;
}

Note: :unsupported selector does not exist.

Will still parse correctly and match :valid even in browsers which don't support :unsupported, whereas:

input:invalid,
input:unsupported {
  border: 1px solid red;
}

input:valid,
input:unsupported {
  border: 1px solid green;
}

Simplifying list selectors

The :is() pseudo-class can greatly simplify your CSS selectors. For example, take the following CSS:

/* 3-deep (or more) unordered lists use a square */
ol ol ul,
ol ul ul,
ol menu ul,
ol dir ul,
ol ol menu,
ol ul menu,
ol menu menu,
ol dir menu,
ol ol dir,
ol ul dir,
ol menu dir,
ol dir dir,
ul ol ul,
ul ul ul,
ul menu ul,
ul dir ul,
ul ol menu,
ul ul menu,
ul menu menu,
ul dir menu,
ul ol dir,
ul ul dir,
ul menu dir,
ul dir dir,
menu ol ul,
menu ul ul,
menu menu ul,
menu dir ul,
menu ol menu,
menu ul menu,
menu menu menu,
menu dir menu,
menu ol dir,
menu ul dir,
menu menu dir,
menu dir dir,
dir ol ul,
dir ul ul,
dir menu ul,
dir dir ul,
dir ol menu,
dir ul menu,
dir menu menu,
dir dir menu,
dir ol dir,
dir ul dir,
dir menu dir,
dir dir dir {
  list-style-type: square;
}

You can replace it with:

/* 3-deep (or more) unordered lists use a square */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}

is() does not select pseudo-elements

The :is() pseudo-class does not match pseudo-elements.

So rather than this:

some-element:is(::before, ::after) {
  display: block;
}

instead do:

some-element::before,
some-element::after {
  display: block;
}

Simplifying section selectors

The :is() pseudo-class is particularly useful when dealing with HTML sections and headings. Since <section>, <article>, <aside>, and <nav> are commonly nested together, without :is(), styling them to match one another can be tricky.

For example, without :is(), styling all the <hn> elements at different depths could be very complicated:

/* Level 0 */
h1 {
  font-size: 30px;
}

/* Level 1 */
section h1,
article h1,
aside h1,
nav h1 {
  font-size: 25px;
}

/* Level 2 */
section section h1,
section article h1,
section aside h1,
section nav h1,
article section h1,
article article h1,
article aside h1,
article nav h1,
aside section h1,
aside article h1,
aside aside h1,
aside nav h1,
nav section h1,
nav article h1,
nav aside h1,
nav nav h1 {
  font-size: 20px;
}

/* Level 3 */
/* don't even think about it! */

Using :is(), though, it's much easier:

/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
/* Level 2 */
:is(section, article, aside, nav) :is(section, article, aside, nav) h1 {
  font-size: 20px;
}
/* Level 3 */
:is(section, article, aside, nav)
  :is(section, article, aside, nav)
  :is(section, article, aside, nav)
  h1 {
  font-size: 15px;
}