このツールについて

入力した CSS セレクターを小さな HTML サンプルに適用し、一致した要素を一覧表示します。解析は DOMParser を使ってブラウザー内で行われ、内容が外部に送信されることはありません。

使い方

セレクターと HTML サンプルを書き換えてテストを実行し、一致件数と抽出された断片を確認します。querySelector の思い込みを検証するのに向いています。

サンプルには子見出しを持つ .card と、クラスのない兄弟要素が含まれます。

入力

div.card > h2

出力

1 match(es): <h2>…</h2>

:nth-child や、子孫セレクターと子セレクターの違いを説明するときにも役立ちます。

HTML はどこかに送信されますか?

いいえ。サンプルはこのページ上でブラウザー標準の DOMParser により解析され、セレクターは querySelectorAll で実行されます。

有効なセレクターなのに一致が 0 件になるのはなぜですか?

多くは結合子やクラス名が 1 階層ずれています。子 (>) と子孫 (スペース) の違いを確認し、クラス名の綴りをサンプルのマークアップと照合してください。