パターンマッチング（Pattern matching）

CSS ではパターンマッチ（Pattern matching）の規則を用いて，ツリー構造内の要素に適用されるスタイル規則を決定します。

セレクタと呼ばれるこれらのパターンは，単純な要素型名のみのものから，複雑な前後関係（例えば子供や子孫，兄弟など）を照合できるものまで多岐にわたります。

パターン内に示された全条件がある要素に当てはまるとき，そのセレクタと要素はマッチ（match）していると言います。

セレクタの中に現れる構造化言語の要素型名や属性名について，大文字と小文字を区別するかどうかは構造化言語に依存します。

例えばHTML 4.01 では大文字と小文字の区別はありませんが，XML応用であるXHTML などでは区別されるので注意してください。

【CSS2セレクタ構文の概要】
パターン 解説の節 意味
* ユニバーサルセレクタ あらゆる要素にマッチする。
E タイプセレクタ Eという名称の要素にマッチする。
E F 子孫セレクタ E要素の子孫であるF要素にマッチする。
E > F 子供セレクタ E要素の子供であるF要素にマッチする。
E + F 隣接セレクタ E要素の直後に後続するF要素にマッチする。
E[foo] 属性セレクタ （値に関わらず）foo属性を設定されたE要素にマッチする。
E[foo="warning"] foo属性値がwarning であるE要素にマッチする。
E[foo~="warning"] 属性セレクタ foo属性値が空白類文字で区切られた値のリストであり，
そのうち1つがwarning という値であるようなE要素にマッチする。
E[lang|="en"] 属性セレクタ lang属性値がハイフンで区切られた値のリストであり，
そのリストがen という値で始まるE要素にマッチする。
DIV.warning クラスセレクタ HTML文書ではDIV[class~="warning"] と同じ。

（XML応用では名前空間で "class" 属性が認識できる場合は利用可能）
E#myid IDセレクタ 一意属性（HTMLの場合はid属性）値がmyid であるE要素にマッチする。
E:link
E:visited		 リンクに関する疑似クラス アンカーのリンク先が未訪問であるE要素（:link），
閲覧済みであるE要素（:visited）にマッチする。
E:active
E:hover
E:focus		 ダイナミック疑似クラス ユーザーから特定の働きかけを受けている最中のE要素にマッチする。
E:first-child :first-child疑似クラス 親要素の最初の子供であるE要素にマッチする。
E:lang(c) 言語に関する疑似クラス 内容がc という言語で書かれているE要素にマッチする。

（言語情報の指定方法は構造化言語によって異なる）