Table of Contents

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