The :matches CSS pseudo-class

on
  • CSS

:matches is a new pseudo-class defined in the CSS Selectors Level 4 specification. :matches allows you to group multiple selectors in one, reducing complexity.

Example which matches all links in any heading:

:matches(h1, h2, h3, h4, h5) > a {
  color: rgb(91, 164, 229);
}

The same could be written without :matches:

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a {
  color: rgb(91, 164, 229);
}

:matches is not yet officially supported in any browser, it is available as non-standard pseudo-class with :-moz-any in Firefox (4+) and :-webkit-any in Chrome (12+) and Safari (5.1.3+).

:any documentation on MDN

With the new CSS Selectors Level 4 specification the :not pseudo-class got updated and works now similar to the :matches pseudo-class, as it supports multiple selectors as arguments.

Example:

.foo:not(.bar, baz) {
  color: rebeccapurple;
}

Works the same as:

.foo:not(.bar):not(.baz) {
  color: rebeccapurple;
}

While :matches and :not with multiple arguments isn't supported everywhere yet, it can be easily transpiled using something like cssnext.