CSS Selector Tester

使い方

1. HTML フラグメントを最初の入力欄に貼り付けます。完全なドキュメントである必要はなく、ネストしたタグがいくつかあれば十分です。
2. .card > p、ul li:nth-child(2)、a[href] のような CSS セレクターを入力します。
3. セレクターを試すを押します。一致した要素は、インデックス・タグ名・id・クラス・テキスト冒頭 40 文字とともに一覧表示されます。
4. セレクターを解析できない場合は、空の結果ではなくブラウザ自身のエラーメッセージが表示されます。タイプミスが「一致なし」と誤解されることはありません。

フラグメントはページに接続されない分離コンテナ内で解析されます。script 要素とインラインイベントハンドラは除去され、src や href などリソースを読み込む属性は空文字になるため、スクリプトは実行されず通信も発生しません。何かが除去された場合は、その件数が明示されます。

よくある用途

• スクレイピング前にセレクターを確認する —— スクリプトに組み込む前に、期待したノードに一致するか確かめる。
• スタイルが効かない原因を調べる —— セレクターが広すぎるのか、狭すぎるのか、そもそも間違っているのかを切り分ける。
• セレクターの意味を学ぶ —— 自分で用意したマークアップで nth-child、属性セレクター、結合子を試す。
• メールや CMS の断片を検証する —— 貼り付けて、あるルールが何要素に当たるかを数える。

よくある質問

Q: データはアップロードされますか？ A: いいえ。処理はすべてブラウザのメモリ内で完結します。内部テンプレートやページの断片が端末の外に出ることはありません。

Q: img[src="photo.png"] が一致しなくなったのはなぜ？ A: ブラウザに通信させないため、リソース属性の値を空にしています。属性自体は残るので img[src] は一致しますが、URL を厳密に比較するセレクターは一致しません。

Q: フラグメント内のスクリプトは実行されますか？ A: いいえ。解析前に script・iframe・object・embed 要素を除去し、インラインイベント属性も削除します。コンテナはドキュメントに接続されません。

Q: セレクター構文は完全に対応していますか？ A: ブラウザが対応する範囲で対応します。このツールはページコードと同じ querySelectorAll を呼ぶため、結果は実行時のブラウザの挙動と一致します。