:matches() CSS pseudo-class
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 | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Chrome for Android | Firefox for Android | IE Mobile | UC Browser for Android | Samsung Internet | QQ Browser | Baidu Browser |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
49webkit
See notes:
|
|||||||||||||||||
56webkit
See notes:
|
9.3
See notes:
|
4.4webkit
See notes:
|
|||||||||||||||
14 | 52moz
See notes:
|
57webkit
See notes:
|
10
See notes:
|
10.0-10.2
See notes:
|
4.4.3-4.4.4webkit
See notes:
|
4webkit
See notes:
|
|||||||||||
11 | 15 | 53moz
See notes:
|
58webkit
See notes:
|
10.1
See notes:
|
44webkit
See notes:
|
10.3
See notes:
|
all | 56webkit
See notes:
|
10webkit
See notes:
|
37o
See notes:
|
57webkit
See notes:
|
52moz
See notes:
|
11 | 11.4webkit
See notes:
|
5webkit
See notes:
|
1.2webkit
See notes:
|
7.12webkit
See notes:
|
54moz
See notes:
|
59webkit
See notes:
|
TP
See notes:
|
45webkit
See notes:
|
||||||||||||||
55moz
See notes:
|
60webkit
See notes:
|
46webkit
See notes:
|
|||||||||||||||
56moz
See notes:
|
61webkit
See notes:
|
Notes
Most browsers support this spelled as a prefixed :-vendor-any()
pseudo-class.
-
1
Only supports the
:-webkit-any()
pseudo-class, which is deprecated due to handling specificity incorrectly. -
2
Also supports the
:-webkit-any()
pseudo-class, which is deprecated due to handling specificity incorrectly. -
3
Only supports the
:-moz-any()
pseudo-class.
Links
Mozilla Developer Network (MDN) documentation - CSS :any
WebKit blog post about adding `:matches()` and other Selectors Level 4 features
Mozilla Bug 906353 - Add support for css4 selector :matches(), the standard of :-moz-any()
Microsoft Edge UserVoice feature request for :matches()
JS Bin testcase
Issue 568705: Chrome does not support :matches() selector