CSS2リファレンスナヴィゲーションを読み飛ばす。Rootに戻る目次:C前へ:P次へ:Nはじめに:A用語定義:Gリンク集:Lセレクタこの文書では,CSS2のセレクタ構文とその概要について述べます。CSSでは適用対象の選択のためにセレクタと呼ばれるパターンマッチングの規則が用いられ,文書ツリーの各要素に適用されるスタイル規則を決定します。このセレクタの章を読み始める前に,まづCSS2構文の概説を通読されることを,お奨めします。matching)の規則を用いて,文書ツリーの各要素に適用されるスタイル規則を決定します。セレクタと呼ばれるこれらのパターンは単純な要素型名のみのものから,複雑な前後関係(たとえば子供や子孫,兄弟など)を照合できるものまで多岐に亙ります。パターン内に示された全条件がある要素と一致するとき,そのセレクタと要素はマッチ(match)していると謂います。ついて,それらの大文字と小文字に敏感であるかは,文書言語に依存します。4.01文書であれば一般に大文字と小文字には無頓着ですが,XML応用では区別されるので注意してください。あらゆる要素にマッチする。Eという名称の要素にマッチする。E要素の子孫であるF要素にマッチする。E要素の子供であるF要素にマッチする。兄であるE要素の直後にある弟のF要素にマッチする。foo属性が設定されたE要素にマッチする(値が何であれ)。あるE要素にマッチする。いう語であるE要素にマッチする。いう語で始っているE要素にマッチする。あるE要素にマッチする。始点アンカーのリンク先が未訪問であるE要素(:link),または訪問済みであるE要素(:visited)にマッチする。ユーザから特定の働きかけを受けている間のE要素にマッチする。親要素内に初出する子供のそれがE要素ならマッチする。いう言語で書かれているE要素にマッチする。(言語情報をどう指定するかは文書言語に依って異る)補足:スタイル指定はタグに適用される訣ではない要素とタグを峻別すべきです。識別させるための目印に過ぎないのであり,スタイルは要素に適用されます。4のソース文書において,要素の開始タグと終了タグが共に省略できる場合の説明がつきません。Agentに拠って常に解析されるのです。Agentは,ソース文書内のタグづけから各要素を解析し,文書ツリーを組立てます。CSSの重要な特徴であるカスケード処理と継承に基いて,文書ツリー内の各要素に適用するスタイル規則を決定します。syntax)セレクタ(selector)は結合子で分けられた一つ以上の単純セレクタから構成されます。単純(simple)セレクタとは全称セレクタまたはタイプセレクタの何れかと,その直後にゼロ個以上の属性セレクタ,クラスセレクタ,IDセレクタ,疑似クラスが任意の順序で続いたものです。これら構成条件のすべてが一致すると単純セレクタはマッチします。結合子(combinators)には,空白類文字(子孫セレクタで用いられる),閉じ不等号:>(子供セレクタで用いられる),プラス符号:+(隣接兄弟セレクタで用いられる)があり,結合子と単純セレクタの間には自由に空白類文字を挿入して構いません。あるセレクタとマッチする文書ツリー内の要素群を,そのセレクタの主体(subjects)と呼びます。単一の単純セレクタから成るなら,その必要条件を満たす全要素にマッチします。別の単純セレクタや結合子を連結してマッチングの条件を増やしても,その主体は常にセレクタ最後尾の単純セレクタにマッチする要素群の部分集合になります。ひとつの疑似要素はセレクタ最後の単純セレクタ末尾に連結できます。グループ化(Grouping)複数のセレクタが同じ宣言を共有する場合,それらのセレクタはコンマで区切ってグループ化できます。次例では,同じ宣言を持つ三つの規則を,一つの規則にまとめています。}CSSには他の簡略表記メカニズムも提供され,それには宣言の並列および簡略表記プロパティを含みます。selector)全称セレクタはアスタリスクで示され,あらゆる要素型——つまり,文書ツリー内のどんな要素でもマッチします。}全称セレクタが単純セレクタのただ一つの構成素ではないのなら,アスタリスクの表記を省略しても構いません。次に示す二つの規則集合は,等価のセレクタを持っています。{}(補足:全称セレクタは屡々,ブラウザが持つデフォルトスタイルの初期化を意図して,スタイルシートの冒頭で用いられます。selectors)タイプセレクタは文書言語の要素型名——つまり,文書ツリー内のその名前である全要素とマッチします。次の規則は,文書ツリー内にあるすべてのem要素にマッチします。云われますが,不適切です。タグというのは,文書の構成要素を明示するための仕組であって,その符号には定められた要素型の名称を用います。スタイルの適用先となるのは,タグづけから解析された要素です。selectors)子孫セレクタは,ある特定要素の子孫(下位の階層)にあたる要素にマッチします。このセレクタは空白類文字で区切られた複数の単純セレクタから構成されます。いう形の場合,Aを祖先要素とする任意のB要素にマッチします。次例では,p要素の中身にあるすべてのem要素とマッチングさせています。}<p>段落要素の中身にある<em>強調</em>にマッチします。</p>次例では,body要素の孫か,それより深い子孫にあるp要素にマッチします。selectors)子供セレクタは,ある選択対象の子供(直接の下位)にあたる要素にマッチします。このセレクタは閉じ不等号(>)で区切られた複数の単純セレクタから構成されます。いう形の場合,Aを直接の親とする任意のB要素にマッチします。<p>ある対象要素に内包する<em>直接の子供</em>にマッチする。<li>内包する直接の<em>子供でない</em>ならマッチしない。</ul></body>下記では,絞込みの対象として子孫および子供セレクタを併用しています。子孫でなければならない。ある要素内に初出する子供要素を選択する方法は,後述する:first-child疑似クラスで概説します。プラス(+)で区切られた複数の単純セレクタから成る。直後に後続する場合(すなわち直後の弟である場合)にマッチします。これの使い道としては,ブロック間の兄弟関係に合せて垂直マージンを調整したい場合などが挙げられます。<p>兄弟関係にある要素の弟にマッチする。<p>兄弟でも隣接しない弟にはマッチしない。兄弟間にある垂直マージンを削減しています。selectors)CSS2以降では,HTMLなどの文書言語に定められた属性にマッチさせる規則を指定できます。ついて,それらの大文字と小文字に敏感であるかは,文書言語に依存します。4.01文書であれば一般に大文字と小文字には無頓着ですが,XML応用では区別されるので注意してください。属性が設定されているなら,値がなんであれ一致します。}すなわち,これはhref属性とtitle属性の両者が設定された,すべてのa要素にマッチする。通りである時に一致します。ある,input要素にマッチする。通りである時に一致します。