:matches() CSS pseudo-class

- WD

The :matches() (formerly :any()) pseudo-class checks whether the element at its position in the outer selector matches any of the selectors in its selector list. It's useful syntactic sugar that allows you to avoid writing out all the combinations manually as separate selectors. The effect is similar to nesting in Sass and most other CSS preprocessors.

IE

  1. 5.5 - 10: Not supported
  2. 11: Not supported

Edge

  1. 12 - 18: Not supported
  2. 79: Disabled by default
  3. 80: Disabled by default

Firefox

  1. 2 - 3.6: Support unknown
  2. 4 - 72: Partial support
  3. 73: Partial support
  4. 74 - 75: Partial support

Chrome

  1. 4 - 14: Support unknown
  2. 15 - 64: Partial support
  3. 65 - 79: Disabled by default
  4. 80: Disabled by default
  5. 81 - 83: Disabled by default

Safari

  1. 3.1 - 4: Not supported
  2. 5: Support unknown
  3. 5.1 - 8: Partial support
  4. 9 - 12.1: Supported
  5. 13: Supported
  6. TP: Supported

Opera

  1. 9 - 12.1: Not supported
  2. 15 - 51: Partial support
  3. 52 - 65: Disabled by default
  4. 66: Disabled by default

iOS Safari

  1. 3.2 - 6.1: Support unknown
  2. 7 - 8.4: Partial support
  3. 9 - 13.1: Supported
  4. 13.2: Supported
  5. 13.3: Supported

Opera Mini

  1. all: Not supported

Android Browser

  1. 2.1 - 3: Support unknown
  2. 4 - 4.4.4: Partial support
  3. 80: Partial support

Blackberry Browser

  1. 7: Support unknown
  2. 10: Partial support

Opera Mobile

  1. 10 - 12.1: Not supported
  2. 46: Partial support

Chrome for Android

  1. 80: Disabled by default

Firefox for Android

  1. 68: Partial support

IE Mobile

  1. 10: Not supported
  2. 11: Not supported

UC Browser for Android

  1. 12.12: Partial support

Samsung Internet

  1. 4 - 9.2: Partial support
  2. 10.1: Partial support

QQ Browser

  1. 1.2: Partial support

Baidu Browser

  1. 7.12: Partial support

KaiOS Browser

  1. 2.5: Partial support

Most browsers support this spelled as a prefixed :-vendor-any() pseudo-class.

Resources:
JS Bin testcase
Issue 568705: Chrome does not support :matches() selector
Mozilla Bug 906353 - Add support for css4 selector :matches(), the standard of :-moz-any()
MDN Web Docs - CSS :any
WebKit blog post about adding `:matches()` and other Selectors Level 4 features
Microsoft Edge UserVoice feature request for :matches()