CSSセレクターリファレンス

CSSセレクターリファレンスは、モダンブラウザで利用可能なすべてのCSSセレクターの包括的なインタラクティブガイドです。セレクターの仕組みを学ぶ初心者から、めったに使わない擬似クラスを調べる経験豊富な開発者まで、このツールは各セレクターの構文、説明、詳細度スコア、サンプルコード、ブラウザサポートに即座にアクセスできます。

すべての処理はブラウザ内で完全に実行されます。データはサーバーに一切送信されず、ライブプレビューはサンドボックス化されたiframe内で実行されるため、任意のHTMLとCSSの組み合わせを安全に試すことができます。

リファレンスは7つのカテゴリをカバーしています：基本セレクター（タイプ、クラス、ID、ユニバーサル、グループ化）、コンビネーター（子孫、子、隣接兄弟、一般兄弟）、属性セレクター（存在、等値、前方一致、後方一致、部分一致、単語一致）、擬似クラス（hover、focus、not、is、has、whereなど）、擬似要素（before、after、first-line、first-letter、placeholder、selection）、構造擬似クラス（nth-child、first-child、last-of-type、empty、root）、UIステート擬似クラス（checked、disabled、valid、invalid、required、read-only）。

内蔵の詳細度比較ツールでは、2つのセレクターを入力してカスケードでどちらが勝つかを即座に確認できます。これはCSSの詳細度の競合をデバッグする際に非常に役立ちます。すべてのセレクターエントリには「ライブで試す」ボタンがあり、サンプルHTMLとCSSをインタラクティブプレビューエリアに読み込んで、すぐに変更・実験できます。

複雑なセレクターの詳細度を計算する必要がある場合は、CSS詳細度計算ツールと組み合わせてください。CSSプロパティの視覚的な実験には、FlexboxプレイグラウンドやCSS変数ジェネレーターをお試しください。

1. セレクターリストを閲覧するか、検索バーを使用して名前、構文、説明から特定のセレクターを検索します。
2. カテゴリフィルターボタン（基本、コンビネーター、属性など）をクリックしてリストを絞り込みます。
3. セレクター行をクリックして詳細を展開：説明、HTMLサンプル、CSSサンプル、詳細度、ブラウザサポート。
4. コピーボタンをクリックしてセレクター構文をクリップボードにコピーします。
5. ライブで試すをクリックして、セレクターのサンプルを画面下部のインタラクティブプレビューに読み込みます。
6. プレビューエリアのHTMLとCSSを編集して、リアルタイムでセレクターを実験します。
7. 詳細度比較ツールで2つのセレクターを入力し、どちらが勝つかを確認します。
8. Ctrl+Shift+Cで最初に表示されているセレクターをすばやくコピーできます。