Tutorial
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.
