:matches(s1, s2)

Matches

The :matches() pseudo-class takes a list of selectors as an argument. The styles are applied to the element which is represented by the passed argument.

Think of the :matches() selector as the opposite of the :not() selector.

Browser Support (tested using latest versions)

Desktop
Google Chrome
-webkit
Mozilla Firefox
-moz
Safari
Yes
Opera Browser
-webkit
Internet Explorer
No
Mobile
Android Browser
No
Chrome for Android
No
Mozilla Firefox Mobile
No
Safari iOS
-webkit
Opera Mobile
No
IE Mobile
No

Syntax

E:matches(s1, s2, ...) {
/* Where s1 and s2 are two different selectors. */
}

/* The following are the browser supported versions of the :matches() pseudo-class. */

E:-webkit-any(s1, s2, ...) { /* Chrome, Opera */ }
E:-moz-any(s1, s2, ...) { /* Firefox */ }

Example

/* In this example, all p elements which are the first child or have a class special will be red. */

p:matches(:first-child, .special) {
color: red;
}

Information is based on Selectors Level 4 - W3C Working Draft (last updated on May 2, 2013)
Copyright © 2013 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.