: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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Alligator.io is a developer-focused resource that offers tutorials and insights on a wide range of modern front-end technologies, including Angular 2+, Vue.js, React, TypeScript, Ionic, and JavaScript.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.