CSSセレクターテスター

貼り付けたHTMLに対してCSSセレクターをテストし、一致するすべての要素をマークアップとテキストとともに表示します。querySelectorAllを使うため、結果はブラウザと完全に一致します。

CSS セレクター

HTML コード

HTML は DOMParser で解析し、querySelectorAll で検索します。ブラウザーとまったく同じ動作です（CSS Selectors Level 4 の対応状況はブラウザーによります）。貼り付けた HTML 内のスクリプトは実行されません。

CSSセレクターテスターとは？

CSSセレクターテスターは、貼り付けたHTMLに対してセレクターを実行し、一致するすべての要素をouter HTMLとテキスト内容とともに一覧表示します。属性セレクターから :not()、:is()、:has()、:nth-child() まで、ブラウザが対応するすべてに対応しています。

CSSセレクターテスターの使い方

nav li:not(.active) > a[href^="/"] のようなCSSセレクターを入力します。
HTMLを貼り付けるか編集します。
一致数と、各一致のハイライトされたマークアップを確認します。
Copyボタンで、一致したHTMLをすべてコピーします。

例

入力

nav li:not(.active) > a[href^="/"] on the sample HTML

出力

1 match: <a href="/blog" data-track="nav">Blog</a>

a[href] はサンプルの4つのリンクすべてに一致します。

CSSセレクターテスターを使うべき場面

CSSルール、テスト自動化（Playwright、Cypress）、Webスクレイピング、document.querySelector の呼び出しに使うセレクターを書くときに使います。スタイルの適用や詳細度の計算は行わず、:hoverのような動的な擬似クラスは、静的なドキュメントでは一致しません。

CSSセレクターテスターの仕組み

HTMLはDOMParserで切り離されたドキュメントに解析され（スクリプトは実行されません）、セレクターは querySelectorAll() に渡されます。そのため、一致の判定は、新しいSelectors Level 4機能への対応状況も含めて、ブラウザの動作そのままです。無効なセレクターは捕捉されて報告されます。表示されるのは最大200件の一致です。