CSSセレクターとは何ですか？
CSSセレクターは、HTML文書内の特定の要素を選択するためのパターンです。要素名、クラス名、ID、属性、疑似クラスなどを組み合わせて、スタイルを適用する対象を指定します。例えば「.menu > li:first-child」は、menuクラスの直下にある最初のli要素を選択します。
詳細度（Specificity）とは何ですか？
詳細度はCSSセレクターの優先度を決める仕組みです。(a, b, c, d)の4つの値で表され、aはインラインスタイル、bはIDセレクターの数、cはクラス・属性・疑似クラスの数、dは要素・疑似要素の数を示します。詳細度が高いセレクターのスタイルが優先されます。
対応しているセレクターの種類は？
要素セレクター、クラスセレクター、IDセレクター、属性セレクター、疑似クラス（:first-child, :nth-child等）、疑似要素（::before, ::after等）、結合子（子孫、子、隣接兄弟、一般兄弟）など、ブラウザがサポートする全てのCSSセレクターに対応しています。
マッチングはどのように動作しますか？
入力されたHTMLを内部でパースし、querySelectorAllを使用してCSSセレクターに一致する要素を検索します。マッチした要素は黄色の背景と赤いボーダーでハイライト表示され、要素のタグ名・ID・クラス名が一覧で表示されます。
リファレンスパネルには何が含まれていますか？
基本セレクター（要素、クラス、ID、全称）、結合子（子孫、子、隣接兄弟、一般兄弟）、属性セレクター、疑似クラス（:first-child, :nth-child等）、疑似要素（::before, ::after等）の構文と説明が一覧で確認できます。
入力したデータは安全ですか？
はい、全ての処理はブラウザ内で完結しており、入力されたHTMLやセレクターがサーバーに送信されることはありません。安心してご利用いただけます。
詳細度の数値はどのように計算されますか？
詳細度は「ID（a）、クラス・属性・疑似クラス（b）、要素・疑似要素（c）」の3つの値で計算されます。例えば`.myClass p`は（0,1,1）、`#header .nav`は（1,1,0）となり、数値が大きいほど優先度が高くなります。このツールはマッチしたセレクターの詳細度を自動計算・表示するため、CSSの優先順序を一目で判断できます。
複雑なセレクター（隣接セレクターや属性セレクター）もテストできますか？
はい、隣接セレクター（+）、汎用セレクター（~）、属性セレクター（[attr]、[attr="value"]）、疑似クラス（:hover、:nth-childなど）をすべてサポートしています。リアルタイムでマッチした要素がハイライト表示されるため、意図した要素が正しく選択されているか確認できます。
疑似要素（::before、::after）はセレクターテスターで表示されますか？
疑似要素はDOMに実際に存在しないため、ハイライト表示されません。ただしセレクターの詳細度には含まれるため、スタイル定義の優先順位を計算する際には正しく反映されます。
セレクターがマッチしない場合、どのようにデバッグすればよいですか？
セレクターを段階的にシンプルにして、どの部分で失敗しているか確認してください。例えば`.container > p`が失敗した場合、まず`.container`だけテストして要素が選択されることを確認し、その後に`>`演算子を追加するという方法が効果的です。
このツールとブラウザ開発者ツールの違いは？
このツールはセレクターの詳細度計算を瞬時に確認でき、複数のセレクターを並べて比較できます。開発者ツールより高速で、セレクターの文法検証や詳細度確認に特化しているため、CSS開発時の検証に最適です。
このツールで対応していないセレクターはありますか？
CSS Selectorの標準仕様に基づいており、一般的なセレクターはすべてサポートしています。ただしJavaScriptの独自拡張（XPathなど）には対応していません。