Support for `:matches()`

Current support only shows in Safari and Firefox and Chrome maintain an older syntax. I think it’s safe to assume :matches() will eventually be adopted widely by browser vendors.

// Firefox Stable
:-moz-any(a) {
  color: blue;
}

// Chrome Stable
:-webkit-any(a) {
  color: blue;
}

// Safari Stable
:matches(a) {
  color: blue;
}

[tedw]

@simevidas Thanks for the quick reply! Here’s my use case for reference:

:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
}

I was hoping to avoid generating every heading combination, especially since this code is nested in another selector in my project, so was going to do this:

:-webkit-any(h1, h2, h3, h4, h5, h6) + :-webkit-any(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
}
:-moz-any(h1, h2, h3, h4, h5, h6) + :-moz-any(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
}
:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
}

However, you‘re probably right that nesting is the best solution for now:

h1, h2, h3, h4, h5, h6 {
  & + h1,
  & + h2,
  & + h3,
  & + h4,
  & + h5,
  & + h6 {
    margin-top: 0;
  }
}

Although it makes me feel good to reduce the amount of generated CSS, I realize the extra bytes are negligible after gzipping 😄.

P.S. Thanks for all the work you do for the web dev community! Been following you on Twitter and reading your blog posts for a long time.

[yisibl]

@ai Sorry to reply you so late.

For example, ‘:any’ does not support nesting.

• :matches(:matches(h1, h2), h3) 👍
• :-webkit-any(:-webkit-any(h1, h2), h3) 👎