| 基本 | ||
|---|---|---|
| そのタグのすべての要素。 | button { } | |
| そのクラスを持つ要素。 | .active { } | |
| そのidを持つ唯一の要素。 | #header { } | |
| すべての要素。 | * { box-sizing: border-box; } | |
| 文書のルート。グローバルなカスタムプロパティの定番の場所。 | :root { --gap: 1rem; } | |
| AまたはBに一致する要素（グループ化）。 | h1, h2, h3 { } | |
| 結合子 | ||
| Aの子孫である任意のB。 | nav a { } | |
| Aの直接の子であるB。 | ul > li { } | |
| Aの直後にあるB。親は同じ。 | h1 + p { } | |
| Aの後ろに続くすべてのB。親は同じ。 | h1 ~ p { } | |
| 擬似クラス（状態） | ||
| ポインターが乗っている間の要素。 | a:hover { } | |
| キーボードフォーカスを持つ要素。 | input:focus { } | |
| 親の最初の子である要素。 | li:first-child { } | |
| n番目の子。2nのような式も取れる。 | tr:nth-child(2n) { } | |
| 内側のセレクターのどれにも一致しない要素。Selectors 4以降はリストも取れる。 | li:not(:first-child, .skip) { } | |
| チェックの入ったチェックボックス、ラジオ、またはオプション。 | input:checked { } | |
| 無効化された入力欄またはボタン。 | button:disabled { } | |
| 内側のセレクターに一致するものを含む親。 | li:has(ul) { } | |
| リスト内の任意のセレクター。詳細度はリスト内で最も高いもの。 | :is(ol, ul) li { } | |
| :is()と同じだが、詳細度はゼロ。 | :where(ol, ul) li { } | |
| リングを表示すべきフォーカス。通常はキーボード由来。 | a:focus-visible { } | |
| 自身または子孫にフォーカスがある要素。 | form:focus-within { } | |
| 親の最後の子である要素。 | li:last-child { } | |
| 兄弟のいない要素。 | p:only-child { } | |
| 同じタグのn番目の兄弟。2nのような式も取れる。 | p:nth-of-type(2n) { } | |
| 同じタグの最初または最後の兄弟。 | p:first-of-type { } | |
| 子もテキストも持たない要素。 | td:empty { } | |
| 未訪問のリンクと訪問済みのリンク。 | a:visited { } | |
| 必須とマークされた入力欄と、任意のままの入力欄。 | input:required { } | |
| 値が検証ルールに合格または不合格となる入力欄。 | input:invalid { } | |
| ユーザーが編集できない入力欄。 | input:read-only { } | |
| idがURLのフラグメントに一致する要素。 | #note:target { } | |
| グループの事前選択されたオプションまたはデフォルトボタン。 | input:default { } | |
| スクリプトによって不確定状態にされたチェックボックス。 | input:indeterminate { } | |
| すべての組み込み要素、または登録済みのカスタム要素。 | my-widget:defined { } | |
| 指定された言語の要素。 | p:lang(fr) { } | |
| 擬似要素 | ||
| 要素の前に生成されるコンテンツノード。 | label::before { content: ""; } | |
| 要素の後に生成されるコンテンツノード。 | code::after { content: ";"; } | |
| テキストブロックの最初の文字。 | p::first-letter { } | |
| 入力欄のプレースホルダーテキスト。 | input::placeholder { } | |
| テキストブロックの最初の行。 | p::first-line { } | |
| ユーザーがハイライトしたテキスト。 | ::selection { } | |
| リスト項目のビュレットまたは番号。 | li::marker { } | |
| 全画面要素やダイアログの背後の領域。 | dialog::backdrop { } | |
| ファイル入力欄の中の参照ボタン。 | input::file-selector-button { } | |
| ホストが公開したシャドウDOMのパート。 | my-widget::part(header) { } | |
| 属性セレクター | ||
| その属性を持つ要素。値は問わない。 | [required] { } | |
| 属性がvalと完全に等しい。 | [type="submit"] { } | |
| 属性がvalで始まる。 | a[href^="https"] { } | |
| 属性がvalで終わる。 | a[href$=".pdf"] { } | |
| 属性がvalを含む。 | a[href*="login"] { } | |
| valを含む、スペース区切りのリスト。 | [class~="badge"] { } | |
| 値がvalと等しい、またはvalとハイフンに続く形で始まる。 | [lang|="en"] { } | |