4. セレクタの構文規則
セレクタ
CSSでは、セレクタに指定された条件と「パターンマッチ」を行い、そのパターンに一致した要素に対してスタイルを適用する。(※ すべてのUAが、セレクタの動作をすべて実装しているわけではないので、 CSSとしては正しくても動作しない場合もあるので注意が必要である。)ここでは次に示す主なセレクタの代表的な指定方法について説明する。
- ユニバーサルセレクタ
- タイプセレクタ
- 子孫セレクタ
- 子セレクタ
- 隣接セレクタ
- 属性セレクタ
- クラスセレクタ
- IDセレクタ
- 疑似要素
- 疑似クラス
ユニバーサルセレクタ
「ユニバーサルセレクタ」は、以下の構文（セレクタ部分に「＊」を指定する）で記述し、すべての要素に指定されたスタイルが適用される。
* { 宣言（スタイルの記述） }
例えば、以下のようにユニバーサルセレクタによってスタイルを宣言すると、すべての要素の色が赤に設定される。
* { color: red }
タイプセレクタ
セレクタ部分に「要素名」を指定する構文を「タイプセレクタ」と呼び、セレクタとして指定された要素のみにスタイルが適用される。
要素名 { 宣言（スタイルの記述） }
例えば、以下のようにタイプセレクタによってスタイルを宣言すると、h1要素の色が赤に設定される。
h1 { color: red }
また、複数の要素に同一のスタイルを適用する場合には、各要素を「カンマで区切ってグループ化」することもできる。 なお、このグループ化は、タイプセレクタだけでなく、その他のセレクタでも有効である。 例えば、次の例の場合、宣言部分に指定されたスタイルは、h1、h2、h3の各要素に適用される。
h1,h2,h3 { 宣言（スタイルの記述） }
つまり、以下のようなタイプセレクタによる指定があった場合、
h1 { color: red }
h2 { color: red }
h3 { color: red }
これは以下のようなグループ化による指定と同じ意味になる。
h1,h2,h3 { color: red }
子孫セレクタ
「子孫セレクタ」は、各要素を「空白で区切る」ことで、文書ツリーにおいてある要素の子孫となる要素に指定されたスタイルが適用される。
祖先要素 子孫要素 { 宣言（スタイルの記述） }
例えば、以下のようなタイプセレクタによるスタイル指定とhtmlコードを考えてみよう。
h1 { color: red }
em { color: red }
<h1>見出し１の<em>強調</em></h1>
<p>段落の<em>強調</em></p>
この場合、"見出し１の強調"はすべて赤色で表示され、"段落の強調"は"強調"の部分のみが赤色で表示される。 このときスタイル指定に子孫セレクタを使用すると、h1要素内に出現するem要素のときは、強調部分を青色で表示し、 その他の場合には、赤色のままにすることができる。 これは以下のようにh1要素の子孫としてem要素を子孫セレクタで指定することにより実現できる。
h1 { color: red }
em { color: red }
h1 em { color: blue }
子セレクタ
「子セレクタ」は、各要素を「記号">"で区切って」記述する。その基本的な動作は子孫セレクタに似ている。 異なる点は、子孫セレクタが指定された祖先要素に含まれていれば、その階層は孫の孫に至ろうが有効であるのに対して、 子セレクタは、指定された要素の直下の階層である子要素のみにスタイルが適用されることだ。
親要素 > 子要素 { 宣言（スタイルの記述） }
例えば、以下のようなスタイルを考えてみる。
em { color: red }
dfn { color: blue }
p em { color: green }
p > dfn { color: red }
そして、このスタイルを適用させるhtmlコードが、以下のように記述されているとき、
<p><em>before<dfn>defined</dfn>after</em></p>
<p><dfn>before<em>defined</em>after</dfn></p>
上の行では、p要素の子要素としてem要素、孫要素としてdfn要素が記述されているので、"before"と"after"がそれぞれ緑色、"defined"が青色で表示される。
また、下の行では、p要素の子要素としてdef要素、孫要素としてem要素が記述されているので、"before"と"after"がそれぞれ赤色、"defined"が緑色で表示される。
隣接セレクタ
「隣接セレクタ」は、各要素を「記号"+"で区切って」、以下のような構文で記述する。
直前要素 + 直後要素 { 宣言（スタイルの記述） }
直前要素と直後要素は、同じ親要素を共有し、直前要素の直後に指定された直後要素が出現する場合にスタイルを適用する。
例えば、以下のようなスタイル指定とhtmlコードを考えてみよう。
h1 { color: red }
h2 { color: red }
h1 + h2 { color: blue }
<h1>見出し１</h1>
<h2>見出し２</h2>
<h2>見出し３</h2>
ここでは、"見出し１"が赤色で表示され、そのh1要素の「直後」であるh2要素の"見出し２"が青色、 そして、直後でないh2要素の"見出し３"は赤色で表示される。
属性セレクタ
これまでの各セレクタは、その対象が要素であったが、「属性セレクタ」は、属性名および属性値の組み合わせにより、 適用するスタイルを変えることができる。属性セレクタには、以下の４つの方法がある。
[属性名]
以下の構文で記述し、指定された要素に属性が設定されている場合にスタイルを適用する。
要素 [属性名] { 宣言（スタイルの記述） }
この場合、属性値の内容は何でもよい。例えば、次のスタイル指定では、title属性が指定されているh1要素のみにスタイルが適用される。
h1 { color: black }
h1[title] { color: red }
<h1>見出し１</h1>
<h1 title="t1">見出し２</h1>
つまり、"見出し１"はtitle属性がないので黒色で表示され、"見出し２"はtitle属性が指定されているので赤色で表示される。
[属性名="属性値"]
以下の構文で記述し、指定された要素の属性に、指定された属性値が設定されている場合、つまり属性値が一致する場合にスタイルを適用する。
要素 [属性名="属性値"] { 宣言（スタイルの記述） }
例えば、以下のスタイル指定およびhtmlコードの場合、"見出し１"と"見出し２"は黒色、"見出し３"が赤色で表示される。
h1 { color: black }
h1[title="head"] { color: red }
<h1>見出し１</h1>
<h1 title="t1">見出し２</h1>
<h1 title="head">見出し３</h1>
[属性名~="属性値"]
以下の構文で記述し、指定された要素の属性が「空白で区切られた語のリスト」であり、 そのうちの１つが指定された属性値に一致する場合にスタイルを適用する。
要素 [属性名~="属性値"] { 宣言（スタイルの記述） }
例えば、以下のスタイル指定およびhtmlコードの場合、"見出し１"は赤色、"見出し２"が黒色で表示される。
h1 { color: black }
h1[title~="title"] { color: red }
<h1 title="head title t1">見出し１</h1>
<h1 title="title-head-t1">見出し２</h1>
[属性名|="属性値"]
以下の構文で記述し、指定された要素の属性が「記号"-"で区切られた語のリスト」であり、 その先頭の語が指定された属性値に一致する場合にスタイルを適用する。
要素 [属性名|="属性値"] { 宣言（スタイルの記述） }
例えば、以下のスタイル指定およびhtmlコードの場合、"見出し１"は黒色、"見出し２"が赤色で表示される。
h1 { color: black }
h1[title|="title"] { color: red }
<h1 title="title1-head-t1">見出し１</h1>
<h1 title="title-head-t1">見出し２</h1>
クラスセレクタ
「クラスセレクタ」は、要素の「class属性」に指定した属性値と「クラス名」が一致する場合にスタイルを適用する。クラス名は記号"."で区切り記述する。
要素.クラス名 { 宣言（スタイルの記述） }
以下のスタイル指定の場合、class属性に"red"が指定されているp要素の場合のみ、赤色で表示される。
p.red { color: red }
<p style="red">赤色で表示されます</p>
また、要素を記述しない場合は、ユニバーサルセレクタを指定したのと同じ意味となり、全要素が対象となります。
.red { color: red }
<h1 style="red">赤色で表示されます</h1>
<p style="red">ここも赤色で表示されます</p>
IDセレクタ
「IDセレクタ」は、要素の「id属性」に指定した属性値とIDが一致する場合にスタイルを適用する。IDは記号"#"で区切り記述する。
要素#ID { 宣言（スタイルの記述） }
以下のスタイル指定の場合、id属性に"top"が指定されているp要素の場合のみ、赤色で表示される。
p#top { color: red }
<p id="top">赤色で表示されます</p>
また、要素を記述しない場合は、ユニバーサルセレクタを指定したのと同じ意味となり、全要素が対象となります。
疑似要素
「疑似要素」は、通常の要素による文書ツリー（文書構造）だけでは表現できない文書構造を表現し、 それに対してスタイルを適用するためのものです。
:first-line疑似要素
「:first-line疑似要素」は、ある要素の「最初の行」にスタイルを適用する。
要素:first-line { 宣言（スタイルの記述） }
例えば、以下のようなスタイル指定とhtmlコードの場合、段落の１行目は赤、２行目以降は黒になる。
p { color: black }
p:first-line { color: red }
<p>１行目は赤色で表示<br />
２行目以降は黒色で表示</p>
:first-letter疑似要素
「:first-letter疑似要素」は、ある要素の「最初の文字」にのみスタイルを適用する。
要素:first-letter { 宣言（スタイルの記述） }
例えば、以下のようなスタイル指定とhtmlコードの場合、最初の１文字目である"１"と"２"が赤色で表示される。
p { color: black }
p:first-letter { color: red }
<p>１：最初の文字のみが赤</p>
<p>２：最初の文字のみが赤</p>
疑似クラス
「疑似クラス」は、通常の要素および属性以外の条件によりスタイルを適用するためのものです。
:first-child疑似クラス
「:first-child疑似クラス」は、ある要素の「最初の子要素」である場合、 つまり、指定された要素が初めて出現した場合にスタイルを適用する。
要素:first-child { 宣言（スタイルの記述） }
例えば、以下のようなスタイル指定とhtmlコードの場合、最初のp要素は赤、２番目以降のp要素は黒になる。
p { color: black }
p:first-child { color: red }
<p>初めての段落は赤</p>
<p>２番目以降は黒</p>
:link疑似クラス
「:link疑似クラス」は、「未訪問のリンク（a要素）」にスタイルを適用する。
:link { 宣言（スタイルの記述） }
:visited疑似クラス
「:visited疑似クラス」は、「訪問済みリンク（a要素）」にスタイルを適用する。
:visited { 宣言（スタイルの記述） }
:hover疑似クラス
「:hover疑似クラス」は、「指定された要素の上にカーソル（ポインタ）が来た場合」にスタイルを適用する。 ただし、指定された要素がカーソルを生成しない要素の場合、この疑似クラスはサポートされない場合がある。
要素:hover { 宣言（スタイルの記述） }
:active疑似クラス
「:active疑似クラス」は、「指定された要素がアクティブな場合」にスタイルを適用する。 例えば、ボタンをクリックしたときのマウスボタンを押してから離すまでの時間である。
要素:active { 宣言（スタイルの記述） }
:focus疑似クラス
「:focus疑似クラス」は、「指定された要素がフォーカスを持つ場合」にスタイルを適用する。 例えば、テキスト入力フォームや選択ボックスなどにフォーカスが移動したときである。
要素:focus { 宣言（スタイルの記述） }
:lang疑似クラス
「:lang疑似クラス」は、「指定された要素のlang属性の値が、スタイルで指定された言語コードと一致する場合」にスタイルを適用する。
要素:lang(言語コード) { 宣言（スタイルの記述） }