W3Schools の CSS リファレンスは、すべての主要なブラウザで定期的にテストをしています。
W3Schools の CSS リファレンスは、すべての主要なブラウザで定期的にテストをしています。
CSS におけるセレクタは、スタイルにしたい要素（複数可）を選択するために使用するパターンです。
いろいろなセレクタを試してみるには、CSS セレクタテスタを使用してください。
"CSS" の列は、プロパティが定義されている CSS のバージョン（CSS1、CSS2、またはCSS3）を示しています。
| セレクタ | 例 | 例の説明 | CSS |
|---|---|---|---|
| .class | .intro | class="intro" を持った全要素を選択する | 1 |
| #id | #firstname | id="firstname" を持った要素を選択する | 1 |
| * | * | 全要素を選択する | 2 |
| element | p | 全ての <p> 要素を選択する | 1 |
| element,element | div, p | 全ての <div> 要素と、全ての <p> 要素を選択する | 1 |
| element element | div p | <div> 要素内の、全ての <p> 要素を選択する | 1 |
| element>element | div > p | 親要素が <div> 要素である、全ての <p> 要素を選択する | 2 |
| element+element | div + p | <div> 要素の直後に配置された全ての <p> 要素を選択する | 2 |
| element1~element2 | p ~ ul | <p> 要素が先行しているすべての <ul> 要素を選択する | 3 |
| [attribute] | [target] | target 属性を持った全ての要素を選択する | 2 |
| [attribute=value] | [target=_blank] | target="_blank" を持った全ての要素を選択する | 2 |
| [attribute~=value] | [title~=flower] | 単語 "flower" を含む title 属性を持った全ての要素を選択する | 2 |
| [attribute|=value] | [lang|=en] | "en" で始まる lang 属性の値を持った全ての要素を選択する | 2 |
| [attribute^=value] | a[href^="https"] | href 属性値が "https" で始まるすべての <a> 要素を選択する | 3 |
| [attribute$=value] | a[href$=".pdf"] | href 属性値が ".pdf" で終るすべての <a> 要素を選択する | 3 |
| [attribute*=value] | a[href*="w3schools"] | href 属性値が部分文字列 "w3schools" を含んでいるすべての <a> 要素を選択する | "w3schools"3 |
| :active | a:active | アクティブリンクを選択する | 1 |
| ::after | p::after | 全ての <p> 要素の後にコンテンツを挿入する | 2 |
| ::before | p::before | 全ての <p> 要素の前にコンテンツを挿入する | 2 |
| :checked | input:checked | チェックされた全ての <input> 要素を選択する | 3 |
| :disabled | input:disabled | 無効な全ての <input> 要素を選択する | 3 |
| :empty | p:empty | テキストノードを含む子を持たない全ての <p> 要素を選択する | 3 |
| :enabled | input:enabled | 有効な全ての <input> 要素を選択する | 3 |
| :first-child | p:first-child | 親の最初の子である全 <p> 要素を選択する | 2 |
| ::first-letter | p::first-letter | 全 <p> 要素の先頭文字を選択する | 1 |
| ::first-line | p::first-line | 全 <p> 要素の先頭行を選択する | 1 |
| :first-of-type | p:first-of-type | その親の最初の <p> 要素である全ての <p> 要素を選択する | 3 |
| :focus | input:focus | フォーカスを持った input 要素を選択する | 2 |
| :hover | a:hover | マウスが乗っているリンクを選択する | 1 |
| :in-range | input:in-range | 指定した範囲内の値を持った input 要素を選択する | 3 |
| :invalid | input:invalid | 無効な値を持った input 要素を選択する | 3 |
| :lang(language) | p:lang(it) | "it"(Italian) に等しい lang 属性を持った全ての <p> 要素を選択する | (Italian)2 |
| :last-child | p:last-child | その親の最後の子である全ての <p> 要素を選択する | 3 |
| :last-of-type | p:last-of-type | その親の最後の <p> 要素である全ての <p> 要素を選択する | 3 |
| :link | a:link | 全ての未読リンクを選択する | 1 |
| :not(selector) | :not(p) | <p> 要素以外の全ての要素を選択する | 3 |
| :nth-child(n) | p:nth-child(2) | その親の2番目の子要素である全ての <p> 要素を選択する | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 最後の子から数えて、その親の2番目の子である全ての <p> 要素を選択する | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 最後の子から数えて、その親の2番目の <p> 要素である全ての <p> 要素を選択する | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | その親の2番目の <p> 要素である全ての <p> 要素を選択する | 3 |
| :only-of-type | p:only-of-type | その親の要素が <p> だけである全ての <p> 要素を選択する | 3 |
| :only-child | p:only-child | <p>の親要素内で唯一の子要素である（兄弟を持たない）全ての<p>要素を選択する | 3 |
| :optional | input:optional | "required" でない属性を持った input 要素を選択する | 3 |
| :out-of-range | input:out-of-range | 指定した範囲外の値を持った input 要素を選択する | 3 |
| :read-only | input:read-only | "readonly" が指定された input 要素を選択する | 3 |
| :read-write | input:read-write | "readonly" が指定されていない input 要素を選択する | 3 |
| :required | input:required | "required" が指定された属性を持った input 要素を選択する | 3 |
| :root | :root | 文書のルート要素を選択する | 3 |
| ::selection | ::selection | ユーザにより選択された要素の一部を選択する | |
| :target | #news:target | （アンカー名を含む URL をクリックした）現在アクティブな #news 要素を選択する | 3 |
| :valid | input:valid | 有効な値を持った全ての input 要素を選択する | 3 |
| :visited | a:visited | 全ての既読リンクを選択する | 1 |