CSS Selector Level 4 » Matches-any pseudo-class

This pseudo-class is called matches-any pseudo-class and takes a selector list as argument (combination selectors aren't allowed). It lets you create sets of selectors by instituting groups which match all included selectors. Negations may not be nested within itself like this invalid example: E:matches(:matches(F))

Syntax

Copy
:matches(selector1[, selector2,]) {
    /* declarations */
}

Example

Copy
section h1, article h1, aside h1 {
    color: red;
}

/* Is the same as */

:matches(section, article, aside) h1 {
    color: red;
}

/* Working, prefixed examples. Note: Mozilla and WebKit uses their own syntax :-prefix-any */
:-moz-any(section, article, aside) h1,
:-webkit-any(section, article, aside) h1{
    color: red;
}

This example will select all h1 headings which are childs of section, article, aside grouped by the :matches selector.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (12) Yes (4) Yes (5.1) No No Yes (15)
Mobile Yes (59) Yes (54) Yes (5) No No Yes (37)

Usage statistics (Alexa Top 1,250,000 sites)


Please wait a moment, the comments start loading now...
explorermozillachromesafariopera