The CSS :matches() Pseudo-Class


While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

:matches() is a new CSS pseudo-class that allows to save time by grouping selectors together:

:matches(article, div.section, section) h2 {
  font-size: 3em;

/* Is this equivalent of this: */
article h2, div.section h2, section h2 {
  font-size: 3em;

Here’s another example to bring home the point:

:matches(.main, p, div.my-stuff) :matches(h1, h2, h3, h4) {
  border: 2px dotted rgba(255,134,34,0.5);

/* Is this equivalent of this: */
.main h1,
.main h2,
.main h3,
.main h4,
p h1,
p h2,
p h3,
p h4,
div.my-stuff h1,
div.my-stuff h2,
div.my-stuff h3,
div.my-stuff h4 {
  border: 2px dotted rgba(255,134,34,0.5);

Lots of time saved typing all of this in this second example! This can really help make your CSS files smaller too.

Browser Support

👉 Myth is a good option to start using :matches() today.

Can I Use css-matches-pseudo? Data on support for the css-matches-pseudo feature across the major browsers from caniuse.com.

Creative Commons License