Matches :matches(s1, s2)

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

Chrome Firefox Safari Opera IE Edge
Desktop -webkit -moz yes -webkit no no
Mobile -webkit -moz yes -webkit no 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.