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