CSS - :any

The :any() pseudo-class lets you quickly construct sets of similar selectors by establishing groups from which any of the included items will match. This is an alternative to having to repeat the entire selector for the one item that varies.

Example

 

For example, the following CSS:

CSS
/* 3 deep (or more) unordered lists use a square */
ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
  list-style-type: square;
}

Can be replaced with:

CSS
/* 3 deep (or more) unordered lists use a square */
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
  list-style-type: square;
}

However, do not use the following: (See the section on performance below.)

CSS
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
  list-style-type: square;
}

Syntax  

CSS
:-moz-any( <selector><a title="Hash mark" href="css/value_definition_syntax#hash_mark_(.23)">#</a> ) { <var>style properties</var> }
:-webkit-any( <selector><a title="Hash mark" href="css/value_definition_syntax#hash_mark_(.23)">#</a> ) { <var>style properties</var> }

Values

selector
A selector. This may be a simple selector or a multiple selector comprised of CSS 3 simple selectors and may include the descendant combinator.
Note: The selectors may not contain pseudo-elements and the only combinator allowed is the descendant combinator.

Description  

The :any() pseudo-class lets you quickly construct sets of similar selectors by establishing groups from which any of the included items will match. This is an alternative to having to repeat the entire selector for the one item that varies.

Note : This pseudo-class is in progress to be standardized in CSS Selectors Level 4 under the name :matches(). It is likely that the syntax and name of :-vendor-any() will be changed to reflect it in the near future.

Browser Compatibility  

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 4.0 (2)-moz 12.0 (534.30)-webkit ? ? 5
-webkit
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes)-webkit ? ? ? 5
-webkit

Notes  

This is particularly useful when dealing with HTML5 sections and headings. Since <section>, <article>, <aside>, and <nav> can be nested, without :any(), styling these to match one another can be tricky.

For example, without :any(), styling all the <h1> elements at different depths could be very complicated:

CSS
/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
section h1, article h1, aside h1, nav h1 {
  font-size: 25px;
}
/* Level 2 */
section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1, {
  font-size: 20px;
}
/* Level 3 */
/* ... don't even think about it*/

Using :-any(), though, it's much easier:

CSS
/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
:-moz-any(section, article, aside, nav) h1 {
  font-size: 25px;
}
/* Level 2 */
:-moz-any(section, article, aside, nav)
:-moz-any(section, article, aside, nav) h1 {
  font-size: 20px;
}
/* Level 3 */
:-moz-any(section, article, aside, nav)
:-moz-any(section, article, aside, nav)
:-moz-any(section, article, aside, nav) h1 {
  font-size: 15px;
}

Issues with performance and specificity

Bug 561154 tracks an issue with Gecko where the specificity of :-moz-any() is incorrect. The current (as of Firefox 12) implementation puts :-moz-any() in the category of universal rules, meaning using it as the rightmost selector will be slower than using an ID, class, or tag as the rightmost selector.

For example:

CSS
.a > :-moz-any(.b, .c)

is slower than:

CSS
.a > .b, .a > .c

and the following is fast:

CSS
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/:any

CSS CSS Pseudo-class Experimental Reference