CSSセレクターテスター

CSSセレクターテスターは、任意のCSSセレクターをHTMLマークアップに対してテストし、どの要素がマッチするかを即座に確認できる無料のブラウザベースのツールです。スタイルシートのデバッグ、CSSセレクターの学習、スクレイピングクエリの作成など、マッチする行のハイライト、要素詳細、詳細度計算による即時のビジュアルフィードバックを提供します。

すべての処理は、ネイティブのDOMParserおよびquerySelectorAll APIを使用してブラウザ内で完全に実行されます。HTMLが端末から外に出ることはありません。サーバーへの通信、ログ記録、サードパーティサービスの利用は一切ないため、社内テンプレートや本番環境のHTMLに対しても安全にセレクターをテストできます。

本ツールは、ブラウザがサポートするすべてのCSSセレクターに対応しています。クラスセレクター、IDセレクター、属性セレクター、コンビネーター（>、+、~）、疑似クラス（:nth-child、:first-of-type、:not()）などが含まれます。各クエリについて、マッチした要素の数、ID・クラス・要素に分解されたセレクターの詳細度、そして各マッチ要素のタグ名、ID、クラス、CSSパス、テキスト内容を表示する詳細カードが提供されます。

詳細度の計算方法を理解する必要がある場合は、CSS詳細度計算機を併用してください。利用可能なすべてのセレクターの完全なリファレンスについては、CSSセレクターリファレンスをご確認ください。埋め込みスタイル付きの完全なHTMLページをプレビューするには、HTMLライブプレビューをお試しください。

1. サンプルをクリックしてサンプルHTMLとセレクターを読み込むか、HTMLマークアップテキストエリアに自分のHTMLを貼り付けます。
2. 上部のCSSセレクター入力フィールドにCSSセレクターを入力します。
3. 右側のプレビューパネルがマッチする要素を含む行を即座にハイライトします。
4. ツールバーのマッチ数と詳細度バッジで概要を確認します。
5. マッチした要素セクションまでスクロールして、各マッチ要素のタグ名、ID、クラス、CSSパス、テキスト内容を確認します。
6. 詳細度の内訳パネルでID、クラス、要素数の視覚的な分割を確認します。
7. コピーをクリックするか、Ctrl+Shift+Cを押してマッチした要素の詳細をクリップボードにコピーします。
8. クリアをクリックして両方の入力をリセットします。