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

Edge

  1. 12 - 18
  2. 79 - 81
  3. 83

Firefox

  1. 2 - 3.6
  2. 4 - 75
  3. 76
  4. 77 - 78

Chrome

  1. 4 - 14
  2. 15 - 64
  3. 65 - 81
  4. 83
  5. 84 - 86

Safari

  1. 3.1 - 4
  2. 5
  3. 5.1 - 8
  4. 9 - 13
  5. 13.1
  6. TP

Opera

  1. 9 - 12.1
  2. 15 - 51
  3. 52 - 65
  4. 66 - 67
  5. 68

iOS Safari

  1. 3.2 - 6.1
  2. 7 - 8.4
  3. 9 - 13.3
  4. 13.4

Opera Mini

  1. all

Android Browser

  1. 2.1 - 3
  2. 4 - 4.4.4
  3. 81

Blackberry Browser

  1. 7
  2. 10

Opera Mobile

  1. 10 - 12.1
  2. 46

Chrome for Android

  1. 81

Firefox for Android

  1. 68

IE Mobile

  1. 10
  2. 11

UC Browser for Android

  1. 12.12

Samsung Internet

  1. 4 - 10.1
  2. 11.1

QQ Browser

  1. 10.4

Baidu Browser

  1. 7.12

KaiOS Browser

  1. 2.5

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()