このページは、W3CのCSS2の仕様書にあるセレクタの書式について、ブラウザの対応状況を知る為に個人的目的で作ったページです。　仕様書に何が書いてあろうが、（将来どうなるかは置いて置いて）今現在ブラウザが対応していなければ、現状では意味が無いですから。　ということで、ここにはセレクタの簡単な説明とと簡単なサンプルがあります。　

html等の文書のどの要素に、どう言ったスタイルを適応させるかは指定するには、セレクタを使って指定します。　要素とは、div、p、span、table、a、h1等のことです。

セレクタには、単純に要素名をセレクタとしたもの、その前後の位置や入れ子関係によるもの、属性や疑似要素を用いたもの、その組合わせによるものなどがあります。

サンプル部分は別ファイルをインラインフレームに読み込んでいます。　サンプルが表示されない方はリロードして見てください。　 またインラインフレーム未対応のブラウザをお使いの方は、サンプル表示部分にサンプルファイルへのリンクが表示されますので、そちらをクリックして御覧下さい。サンプルからこのページに戻るにはブラウザのバックボタンでお戻り下さい。

*

全ての要素にマッチする。　単独での使用する場合以外は省略することができます。
*.warning と .warning は同じです。

• 全ての要素を文字色オレンジ、ボーダー緑   * { color : #f70; border : 1px dotted #790;}

E, F, G

複数のセレクタに対して、共通のスタイルを宣言する場合は、セレクタをカンマ 「,」 で区切ってグループ化することができる。

• H1とH2とH3をまとめてオレンジ   H1, H2, H3 { color: #fa0; font-size : 100%;}
• IDとclassを指定された要素をまとめて緑　  div#mystyle1, div#mystyle2, p.mystyle3 { color : #8a0;}

E

要素名によるマッチング。　下記の例は要素内にある全てのh1要素に当てはまる。

• h1要素のものをオレンジ   h1 { color: #fc0; font-size : 100%; }

E F

特定の要素内Eの下にある全てのF要素に当てはまる。　単独で記述された、タイプ要素に優先する。　下記の例は、h1要素の中のem要素に当てはまる。

• h1要素のものをオレンヂ   h1 { color: #fc0; }
• em要素のものをオレンジ   em { color: #fc0; }
• h1要素の中のem要素のもを緑   h1 em { color: #cf0; }

E > F

E要素の直接下のF要素に当てはまる。　下記の例は、div要素の直接下のspan要素に当てはまる。

• div要素の直接下のspan要素のもをピンク   div > p { color: #fa0; }

E + F

並列に並んだ後のF要素にスタイルを指定する。

• h1要素のすぐ次のp要素をオレンジ   h1 + p { color: #f70; }
• p要素をピンク   p { color: #faa; }

[att]

属性名によるマッチング。　属性attがあるものに当てはまる。　

• title属性があるものをピンク   A[title] { color:#f77; }
• name属性があるものをオレンジ   A[name] { color:#f70; }
• href属性があるものを緑   A[href] { color:#793; }

[att="val"]

属性名と属性値によるマッチング。　属性attがあり、更に値がvalのものに当てはまる

• title属性の値がmycatのものを背景色を薄いオレンジ   A[title="mycat"] { background-color:#fc7; }
• name属性の値がmycatのものを太字   A[name="mycat"] { font-weight:bold; }
• href属性の値がhttp://google.comのものを斜体   A[href="http://google.com"] { font-style:italic; }

[att~="val"]

属性があり、その値がvalのものに当てはまる。要素に属性値を複数指定する時はスペースで区切る。

• title属性の値にcatがあるものをオレンジ   [title~="cat"] { color: #f70; }
• class属性の値にAbyssinianがあるものをピンク   [class~="Abyssinian"] { color: #f70; }
• a要素の中のclass属性の値がAbyssinianのものを太字   a[class~="Abyssinian"] { font-weight:bold; }
• a要素の中のclass属性の値がAbyssinianのものにマウスを乗せた時に背景を薄いオレンジにする
  a[class~="Abyssinian"]:hover { background-color: #fc7; }

[att|="val"]

属性値がval-で始まるものに当てはまる。(言語のサブコードへの拡張が本来の目的)

• title属性の、属性値がen-で始まるものを赤   *[title|="en"] em { color : #f70 }
• class属性の、属性値がde-で始まるものを赤   *[class|="en"] em { color : #f70 }
• class属性の、属性値がja-で始まるものを赤   *[class|="ja"] em { color : #8a0 }

DIV.warning

class属性がwaningの全て要素に当てはまる。　属性セレクタE[foo~="warning"]に同じ。　要素にclassを指定。 １つのドキュメントに何度でも使用可能。　「.」の後に空白を開けずにclass名を記述する。

• class属性がmystyle01の全ての要素をオレンジ   .mystyle01 { color: #f0f; }
• class属性の値がmystyle01のa要素のものを太字   a .mystyle01{ font-weight:bold; }
• class属性の値がmystyle01のa要素のものにマウスを乗せた時に背景を薄いオレンジにする
  a .mystyle01:hover { background-color: #faa; }
• class属性の値にcatとdogの両方があるものを緑   P.cat.dog { color : #793; }

E#myid

ID属性の値（ID名）がmyidのものに当てはまる。　要素に名前を指定。　１つのドキュメントに1回のみ使用可能。　class属性より優先される。　「#」の後に空白を開けずにID名を記述する

• ID属性値がMYSTYLE01のものをオレンジ　#MYSTYLE01 { color : #f70;}
• class属性値がmystyle02のものを緑　.mystyle02 { color : #7c0;}

E:link
E:visited

The link pseudo-classes　リンク疑似クラス。　ハイパーリンクの張られた要素に当てはまる。　ターゲットが未訪問と訪問済

• a:linkを太字、オレンジ　a:link{ font-weight:bold; color: #f70; }
• a:visitedを灰色　a:visited{ color: #666; }
• クラス名にmycatを指定されたa:link緑にする　a.mycat:link { color: #680; }

E:active
E:hover
E:focus

The dynamic pseudo-classes　ダイナミック疑似クラス。　特定のユーザーのアクション時に当てはまる。　IEでは、アンカー要素のみ。

• a:activeにボーダーで囲む　a:active{ border:1px solid #111; }
• a:hoverの背景を黄色に　a:hover{ background-color: #fc7; }
• a:focusを斜体にする　a:focus{ font-style:italic; }
• p:hover{ background-color: #fc7; }

E:lang( c )

The :lang() pseudo-class　言語疑似クラス

• 英語で書かれたテキストの引用部分を’’で囲む　:lang(en) q { quotes: "'" "'" }
• 日本語で書かれたテキストの引用を「」で囲む　 :lang(ja) q { quotes: "「" "」" }

:first-child

指定された要素の中の、最初に記述された要素に当てはまる。

• DIV要素の中の最初のP要素をオレンジ　DIV > P:first-child { color : #f60; }

:first-line

first-line 最初の1行目に関する疑似要素　

ブロック要素にのみ当てはまる。　指定した要素の最初の1行目にスタイルを当てはめる。　

以下のプロパティのみ指定する事ができる。 fontプロパティ、colorプロパティ、backgroundプロパティ、「word-spacing」「letter-spacing」「text-decoration」「vertical-align」「text-transform」「line-height」「text-shadow」「clear」

• p要素の最初の1行目をオレンジ　p:first-line { color: #f70; }
• p要素の最初の1文字目を緑　p:first-letter { color: #770; }

:first-letter

first-letter 最初の1文字目に関する疑似要素　

ブロック要素にのみ当てはまる。　指定した要素の最初の1文字目にスタイルを当てはめる。

以下のプロパティのみ指定する事ができる。 fontプロパティ、colorプロパティ、backgroundプロパティ、「text-decoration」「vertical-align」 (floatがnoneの場合のみ)「text-transform」「line-height」marginプロパティ、paddingプロパティ、borderプロパティ、「float」「text-shadow」「clear」

• 全てのブロック要素の最初の文字を太文字　*:first-letter { font-weight: bold;}
• p要素の中の最初の文字を150%のサイズ　p:first-letter { font-size: 140%; }
• p要素でclassにmy_f_lの値を指定された中の最初の文字をオレンジ　p.my_f_l:first-letter {color: #f70;}
• span要素を斜体　span { font-style: italic; }