W3C では、“A セレクターは構造を表します。この構造は、インスタンスを、ドキュメント・ツリーのどの要素がこのセレクターによってマッチングされるかを決定する条件として、またはその構造に対応する HTML や HTML 断片の簡単な記述として解釈することができる」と説明しています。
セレクターの例:
- H3
- P.footer
- TABLE#bigtable > TR
- TABLE#bigtable TD
- ノード
- node[x="2"]
- node:selected
- node#subgraph1 > #id2
セレクターは、1 つ以上の単純なセレクターから成ります。
単純なセレクターの例:
- H3
- P.footer
- TABLE#bigtable
- TR
- ノード
- node[x="2"]
- node:selected
- #id2
単純なセレクターは、最小構築ブロックから成ります。
セレクターの最小構築ブロックの例:
- H3
- .footer
- ノード
- [x="2"]
- :selected
- #id2
2 つ以上の単純なセレクターを 1 つのセレクターに集約する場合は、連結子によって区切ります。
連結子は、次の表にその意味を示す単一文字です。余分なスペースは無視されます。
連結子記号
| 移行 |
意味 |
|---|---|
| E F |
E 要素の子孫である F 要素に一致 |
| E > F |
E 要素の子である F 要素に一致 |
| E + F |
E 要素の直下位の F 要素に一致 |
セレクターの最小構築ブロックを以下の表にリストします。特異性列の詳細な説明については、「優先度」を参照してください。
セレクターの最小構築ブロック
| 構築ブロック |
マッチング・ルール |
特異性 |
|---|---|---|
| e |
タイプが e の任意の要素に一致 |
0-0-1 |
| #myid |
myid に等しい ID を持つ任意の要素に一致 |
1-0-0 |
| .myclass |
クラスが myclass である任意の要素に一致 |
0-1-0 |
| :myclass |
疑似クラスが myclass である任意の要素に一致 |
0-1-0 |
| [myattr] |
myattr 属性が存在し <> null である要素に一致 |
0-1-0 |
| [myattr=”warning”] |
myattr 属性値が正確に warning に等しい任意の要素に一致 |
0-1-0 |
| [myattr~=”warning”] |
myattr 属性値が、スペースで区切られている値のリストで、
なおかつその 1 つが warning と完全に等しい任意の要素に一致 |
0-1-0 |
| * |
任意の要素に一致 |
0-0-0 |
例えば、次の行
P.pastoral.marine { color : green ; size : 10pt ; }
は、
<P class="pastoral marine old"> に一致し、パラグラフの色を
green に、フォントのサイズを 10 に設定します。すべてのルールは、暗黙の「*」パターンで開始し、終了します。これは、セレクターは階層内のどこででも一致することが可能であるということです。