CSS:matches() 疑似クラス関数は、セレクターのリストを引数に取り、リスト中のセレクターの何れか一つに当てはまる要素をすべて選択します。数多くのセレクターを小さくまとめて書くのに便利です。

なお、多くのブラウザーでは、この機能を古い、 Chrome, Firefox, Safari などの古いバージョンで対応していた接頭辞付きの疑似クラス — :any() で対応しています。これはベンダー接頭辞が必要であることと、複合セレクターに対応していない点を除けば、 :matches() と全く同じものとして動作します。

/* header, main, footer 要素の中の段落で
   マウスポインタが通過中のものをすべて選択 */
:matches(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* 上記のものは以下のものと同じ */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}


/* :-*-any() の形のものとの後方互換性 */
:-moz-any(header, main, footer) p:hover,
:-webkit-any(header, main, footer) p:hover,
:matches(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

構文

:matches( <selector># )

クロスブラウザーの例

<header>
  <p>This is my header paragraph</p>
</header>

<main>
  <ul>
    <li><p>This is my first</p><p>list item</p></li>
    <li><p>This is my second</p><p>list item</p></li>
  </ul>
</main>

<footer>
  <p>This is my footer paragraph</p>
</footer>
:matches(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

:-webkit-any(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

:-moz-any(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}
let matchedItems;

try {
  matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
} catch(e) {
  try {
    matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
  } catch(e) {
    try {
      matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
    } catch(e) {
      console.log('Your browser doesn\'t support :matches() or :any()');
    }
  }
}

for(let i = 0; i < matchedItems.length; i++) {
  applyHandler(matchedItems[i]);
}

function applyHandler(elem) {
  elem.addEventListener('click', function(e) {
    alert('This paragraph is inside a ' + e.target.parentNode.nodeName);
  });
}

リストセレクターの簡略化

:matches() 疑似クラスは CSS セレクターをとても簡潔にすることができます。例えば以下の 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;
}

... これを次のように置き換えることができます。

/* 3層(以上)の順序なしリストに四角形を使用 */
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) ul,
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) menu,
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) dir {
  list-style-type: square;
}

但し、以下のような使い方はしないでください。(下記のパフォーマンスに関する節を参照。)

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

section セレクターの簡略化

:matches 疑似クラスは、 HTML5 のセクションと見出しを扱うときに特に便利です。 <section><article><aside><nav> は互いによくネストしますので、 :matches() がないと、1つ1つを選択してスタイルを適用するのが難しくなります。

例えば、 :matches() を使わずに、異なる深さの <h1> 要素にスタイルを適用すると、とても複雑になります。

/* 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 */
/* ... 考えたくありません! */

:matches() を使用すると、ずっと簡単になります。

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

メモ

any(): パフォーマンスと特性の問題

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

:matches() aims to fix such problems.

仕様書

仕様書 状態 備考
Selectors Level 4
:matches() の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 66
完全対応 66
完全対応 12
代替名
代替名 非標準の名前 :-webkit-any を使用しています。
Edge 完全対応 15
完全対応 15
完全対応 12
代替名
代替名 非標準の名前 :-ms-matches を使用しています。
Firefox 完全対応 4
代替名
完全対応 4
代替名
代替名 非標準の名前 :-moz-any を使用しています。
IE 未対応 なしOpera 完全対応 あり
代替名
完全対応 あり
代替名
代替名 非標準の名前 :-webkit-any を使用しています。
Safari 完全対応 9
完全対応 9
完全対応 5
代替名
代替名 非標準の名前 :-webkit-any を使用しています。
WebView Android 完全対応 66
完全対応 66
完全対応 あり
代替名
代替名 非標準の名前 :-webkit-any を使用しています。
Chrome Android 完全対応 66
完全対応 66
完全対応 18
代替名
代替名 非標準の名前 :-webkit-any を使用しています。
Edge Mobile 未対応 なしFirefox Android 完全対応 4
代替名
完全対応 4
代替名
代替名 非標準の名前 :-moz-any を使用しています。
Opera Android 完全対応 あり
代替名
完全対応 あり
代替名
代替名 非標準の名前 :-webkit-any を使用しています。
Safari iOS 完全対応 9
完全対応 9
完全対応 5
代替名
代替名 非標準の名前 :-webkit-any を使用しています。
Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報

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

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