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で最初に表示されているセレクターをすばやくコピーできます。