:any

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

:any() 疑似クラスは、いずれかのセレクタがマッチするグループを作ることにより、類似のセレクタのセットをすばやく構築することができます。これは、多様な項目ひとつのためにセレクタ全体を繰り返さなければならない状況の代替策です。

注記: この疑似クラスは CSS Selectors Level 4 で、:matches() という名称で標準化が進められています。:-vendor-any() の構文や名称は、この仕様を反映して将来変更されると思われます。

構文

:-moz-any( selector[, selector]* )
:-webkit-any( selector[, selector]* )

selector
セレクタです。これは基本的なセレクタ、あるいは CSS 3 simple selectors で構成され、子孫セレクタを含む場合もある複数のセレクタを使用できます。
注記: セレクタに疑似要素を含めることはできません。また、使用できる結合子は子孫セレクタに限ります。

以下の CSS について考えます:

/* 3 階層目以降の順不同リストは四角形を使用する */
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;
}

これは以下の CSS に置き換えることができます:

/* 3 階層目以降の順不同リストは四角形を使用する */
:-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;
}

ただし、以下の構文は使用しないでください: (後述するパフォーマンスの章をご覧ください)

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

注記

これは HTML5 のセクションや見出しを扱うときに、特に役立ちます。<section><article><aside><nav> は入れ子にすることができますので、:any() を使用しなければ、互いに一致するようにスタイルを設定することは難しくなるでしょう。

例えば :any() を使用しなければ、さまざまな階層にあるすべての <h1> 要素にスタイルを設定することはとても困難になるでしょう:

/* レベル 0 */
h1 {
  font-size: 30px;
}
/* レベル 1 */
section h1, article h1, aside h1, nav h1 {
  font-size: 25px;
}
/* レベル 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;
}
/* レベル 3 */
/* ... 考えるのはやめましょう */

:-any() を使用すると、とても簡単になります:

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

パフォーマンスと特性の問題

Bug 561154 で、Gecko の :-moz-any() の特性が不適切である問題を追跡しています。現在 (Firefox 12) の実装では :-moz-any() を一般ルールに分類しており、もっとも右のセレクタで使用すると、ID セレクタ、クラスセレクタ、要素型セレクタをもっとも右のセレクタにした場合より遅くなるでしょう。

例:

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

以上のセレクタは以下のセレクタより遅くなります:

.a > .b, .a > .c

また、以下のセレクタは高速です:

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

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 4.0 (2)-moz 12.0 (534.30)-webkit     5-webkit
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? (有)-webkit ? ? ? 5-webkit

ドキュメントのタグと貢献者

 このページの貢献者: yyss
 最終更新者: yyss,