The :matches CSS pseudo-class
: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+).
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.