CSS セレクターテスター
HTML と CSS セレクターを貼り付けると、そのセレクターがマッチするすべての要素を即座に確認できます。マッチ数と各要素のマークアップが表示されます。ブラウザ自身のセレクターエンジンを使うため、結果は document.querySelectorAll と同一です — スクレイパー、スタイルシート、テストセレクターのデバッグに最適です。無効なセレクターは警告されます。すべてブラウザ内でローカルに実行され、何もアップロードされません。
—
使い方
- 最初のボックスに HTML を貼り付けます。
- CSS セレクターを入力します(例: li.item や a[href^="https"])。
- マッチ数と各マッチ要素を確認し、必要ならコピーします。
よくある質問
- どのセレクターに対応していますか?
- 結合子、属性セレクター、:not()、:nth-child() など、querySelectorAll でブラウザがサポートするすべてのセレクターに対応します。::before のような擬似要素は DOM と同様に何にもマッチしません。
- 結果は正確ですか?
- はい。HTML を実際のドキュメントとして解析し、ブラウザのネイティブセレクターエンジンでクエリするため、そのマークアップで querySelectorAll が返すものと正確に一致します。
- セレクターが無効な場合は?
- 誤解を招く結果を返す代わりに、セレクター欄が強調表示され、エラーメッセージが表示されます。
- 私の HTML はどこかに送信されますか?
- いいえ。解析とマッチングは完全にブラウザ内で行われ、何もアップロードされません。
関連ツール
CSS 詳細度計算機
CSS セレクタの (ID, クラス, タイプ) 詳細度を計算。トークン別ウェイト表示と 2 セレクタ比較。
開発 0 0
HTML / CSS / JS ミニファイア
HTML / CSS / JavaScript の空白とコメントを除去 — 削減サイズを表示してコピー。
開発 0 0
カラー名検索
任意のhex/RGB色に最も近いCSS・Tailwind・XKCD色名をOKLabの知覚距離で順位付け表示。
カラー 0 0
正規表現テスター
JavaScript 正規表現をリアルタイムでテストし、マッチ強調と置換プレビューを確認。
開発 0 0
Glob パターンテスター
ファイルパスを glob パターン(*、**、?、[...]、{a,b})に対してブラウザ上でテストします。
開発 0 0
CSS 名前付きカラー
147 個の CSS / X11 named color — HEX・RGB・ライブスウォッチ、検索・色相系列別グループ化。
カラー 0 0