摘要

CSS(カスケードを行うスタイルシート)は、HTMLおよびXMLの文書の、画面上、紙面上、音声などでの描写法を記述するための言語である。スタイルのプロパティを文書中のエレメントに結びつけるため、CSSは、ひとつ以上のエレメントにマッチするパターンであるセレクタを用いる。CSSの水準3に推薦されるセレクタについて、この文書は説明する。このセレクタはCSSの水準2のセレクタを含み、拡張する。

この文書の地位

この文書は来るCSS3の仕様書の"モジュール"のひとつである。CSS1およびCSS2においてすでに存在するセレクタについて説明するだけでなく、CSS3と、このセレクタを必要とするほかの言語の、両方に対する新しいセレクタを提案することも行う。CSSの策定団体は、CSS3のすべての実装がすべてのセレクタを実装しなければならないだろうということを予期していない。その代わりとして、いわゆる"プロフィール"である、CSS3のいくつかの変形がおそらくできるだろう。たとえば、対話的なユーザエージェントのためのひとつのプロフィールだけが、提案されているセレクタのすべてを含む。

この仕様書は、CSSの策定団体によって勧告候補として提案されている。この文書は2001年1月26日付け策定中の草案の改訂版であり、ラストコールの再吟味、批評および、W3CのCSSの策定団体の更なる議論の間に受け取られた提案を組み入れている。

勧告候補の期間は、おおよそ六ヶ月続く(2002年5月終了)と予期されている。すべての人が、この仕様書を再吟味および実装し、(記録された)公開のメーリングリストwww-style(使用説明書を見よ)に批評を返すように奨励される。また、W3Cの会員はCSSの策定団体まで直接に批評を送ることもできる。

万一この仕様書が実施不可能だとわかれば、策定団体は、この文書を策定中の草案の地位に戻し、必要な変更を行う。さもなければ、策定団体は、この文書を勧告案に進めることをW3Cの理事に求めることを予期する。

これはまだ草案の文書であり、いつでも、ほかの文書によって、更新されたり、取って代わられたり、時代遅れにされたりするかもしれない。W3Cの勧告候補を"策定進行中"ではないものとして引用することは不適切である。現在の策定中の草案の一覧表は、http://www.w3.org/TRで見つけられる。

この文書は、翻訳が利用できるかもしれない。この仕様書の英語のバージョンが、唯一の規範的なバージョンである。

ほかのCSS3モジュールへの依存

• 一般的なシンタックス
• 値の割り当て、カスケード、継承
• 生成された内容/マーカー
• ユーザインタフェース

1. 状況

CSS+FPの策定団体の会員は、CSSの仕様書をモジュール化することを、Clamart会議の間に提案した。

このモジュール化、およびCSSの一般的シンタックスの外面化は、仕様書のサイズを減らし、セレクタおよび/あるいはCSSの一般的なシンタックスを新しい仕様書が用いることを可能にする。たとえば、振る舞いやツリーの変換がある。

この文書において導入される構想ごとのテストである、試験事例をこの仕様書は含む。そのテストは完全な適合試験ではないが、この仕様書のある部分が、最小限の程度実装されているか、あるいはまったく実装されていないか確認する方法を使用者に提供するつもりである。

1.1 CSS2からの変更

CSS2におけるセレクタと、セレクタにおけるものとの間の主要な違いは、

• 基本的な定義(セレクタ、セレクタの群、単純なセレクタなど)の一覧表が明白にされている
• がエレメントのセレクタ、普遍的なセレクタ、アトリビュートのセレクタにおいて、今回任意のネームスペースの構成要素が許容される
• 新たな結合子
• アトリビュートのセレクタにマッチ一致する部分文字列を含む新たな単純なセレクタ、および新たな擬似クラス
• 新たな擬似エレメント、および擬似エレメントのための"::"という規約の導入
• セレクタの文法の書き改め
• セレクタをまとめ、おのおのの仕様書によって実際にサポートされるセレクタのセットを定義する仕様書に加えられるプロフィール
• セレクタは今回、CSSのモジュールであり、独立した仕様書である。ほかの仕様書は、今回CSSから独立してこの文書を参照することができる
• この仕様書は今回、これ自体のテストスイートを含む

である。

2. セレクタ

セレクタは構造を表現する。セレクタが文書のツリーの中でどのエレメントにマッチするのか決定する(たとえば、CSSの規則における)条件として、あるいは、その構造と一致するHTMLまたはXMLの断片の均一な記述として、この構造は使われる。

セレクタは単純な要素から、高機能な前後の関係上の表現まで及びうる。

次に続く表は、セレクタのシンタックスを手短に述べるものである。

それぞれのセレクタの意味は、"意味"の縦の列のそれぞれのセルの内容に対して前に位置する"マッチ"によって上の表から引き出される。

3. 大文字・小文字の区別

セレクタにおける、文書言語のエレメントの名前の大文字・小文字の区別は、文書言語に依存する。たとえば、HTMLの場合においては、エレメントの名前は大文字・小文字を区別しないが、XMLの場合においては大文字・小文字を区別する。

また、アトリビュートのセレクタにおける、アトリビュートの名前とアトリビュートの値の大文字・小文字の区別も、文書言語に依存する。

4. セレクタのシンタックス

セレクタは、結合子で区切られた、ひとつ以上の、単純なセレクタの連続である。

単純なセレクタの連続は、結合子で区切られていない一続きの単純なセレクタである。それは、常に種類のセレクタあるいは普遍的なセレクタから始まる。このほかには、種類のセレクタあるいは普遍的なセレクタは、連続の中で許容されない。

単純なセレクタは、種類のセレクタ、普遍的なセレクタ、アトリビュートのセレクタ、IDのセレクタ、内容のセレクタまたは擬似クラスのいずれかである。単純なセレクタの最後の連続にひとつの擬似エレメントが追加されてもよい。

結合子は、空白、"大なりの記号"(>)、"プラスの記号"(+)および"チルダ"(~)である。空白は、それを取り囲む結合子と単純なセレクタの間に現れてもよい。文字"スペース"(Unicodeのコード32)、"タブ"(9)、"ラインフィード"(10)、"キャリッジリターン"(13)および"フォームフィード"(12)がだけ空白に存在してよい。"半角のスペース"(8195)および"表意文字のスペース"(12288)のような、ほかのスペースのような文字は、空白の役割はない。

セレクタによって表される文書のツリーのエレメントは、セレクタの実体と呼ばれる。単純なセレクタのただひとつの連続からなるセレクタは、必要条件を満たすすべてのエレメントを表す。ある連続を、別の、単純なセレクタの連続と結合子に追加すると、付加的なマッチの制約が課されるので、セレクタの実体は、常に、単純なセレクタのもっとも右の連続によって表されるエレメントのサブセットになる。

注: 単純なセレクタの連続も結合子も含まない空のセレクタは、無効なセレクタである。

5. セレクタの群

いくつかのセレクタが同じ宣言を共有するとき、コンマで区切られたリストに集められてもよい。

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

h1, h2, h3 { font-family: sans-serif }

警告: すべてのセレクタが有効なセレクタであるから、この例において同等であることは正しい。そのセレクタのひとつが無効であれば、セレクタの全体の群が無効になるから、すべての三つの項目のエレメントに対する規則が無効になるが、三つの個々の項目の規則ならば、ただひとつが無効になる。

6. 単純なセレクタ

6.1 種類のセレクタ

種類のセレクタは、文書言語のエレメントの種類の名前である。文書のツリーにおけるエレメントの種類の事例を種類のセレクタは表す。

h1

6.1.1 種類のセレクタとネームスペース

種類のセレクタは、任意のネームスペース([XML-NAMES])の構成要素を許容する。前もって宣言されているネームスペースのプレフィックスに、ネームスペースのセパレータである"縦線"(|)によって区切られたエレメントの名前が加えられる。宣言されたネームスペースを持たないエレメントをセレクタが表すことを意図しているのを示すのに、ネームスペースの構成要素は空にしておいてもよい。アスタリスクはネームスペースのプレフィックスに用いてもよく、(ネームスペースを持たないエレメントを含んで)すべてのネームスペースにおけるエレメントをそのセレクタが表すことを示す。デフォルトのネームスペースが宣言されていなければ、ネームスペースの構成要素(ネームスペースのセパレータ)を持たないエレメントの種類のセレクタは、エレメントのネームスペースにかかわらずエレメントを表す("*|"と等しい)。この事例においては、デフォルトのネームスペースにおけるエレメントをセレクタは表す。

注 : 前もって宣言されていないネームスペースのプレフィックスを含む種類のセレクタは無効なセレクタである。ネームスペースのプレフィックスを宣言するための方法は、セレクタを実装している言語にゆだねられる。CSSの場合においては、その方法は、一般的なシンタックスのモジュールの中で定義される。

もしセレクタにおいて用いられているネームスペースのプレフィックスが前もって宣言されてなければ、セレクタは無効だとみなされなければならず、標準のエラーの処理規則にしたがって全体のセレクタが無視されることに注意するべきだ。

ネームスペースの認識のあるクライアントにおいて、エレメントの修飾された名前のローカルの部分だけに対比して、エレメントの種類のセレクタがマッチすることに注意するべきだ。低水準のクライアントにおけるマッチの挙動についての注釈は、下を見よ。

概して:

ns|E

nsというネームスペースにおける名前がEのエレメント

*|E

すべてのネームスペースにおける、名前がEのエレメント。宣言されたネームスペースを持たないものも含む

|E

宣言されたネームスペースを持たない、名前がEの要素

E

もしデフォルトのネームスペースが明示されていなければ、これは*|Eと等しい。そうでなければ、nsがデフォルトのネームスペースであるns|Eと等しい。

@namespace foo url(http://www.example.com);

foo|h1 { color: blue }

foo|* { color: yellow }

|h1 { color: red }

*|h1 { color: green }

h1 { color: green }

6.2 普遍的なセレクタ

普遍的なセレクタである、書かれた"アスタリスク"(*)は、すべてのエレメントの種類に適合する名前を表す。もしデフォルトのネームスペースが明示されていなければ、(宣言されているネームスペースを持たないものも含めて、)すべてのネームスペースにおける、文書のツリーのすべての個々のエレメントを、これは表現する。もしデフォルトのネームスペースが明示されていれば、下の普遍的なセレクタとネームスペースを見よ。

もし普遍的なセレクタが単純なセレクタの連続の構成要素でしかなければ、*は省略されてもよい。たとえば、

注: 普遍的なセレクタを表す*は省かれないことが推奨される。

6.2.1 普遍的なセレクタとネームスペース

普遍的なセレクタは任意のネームスペースの構成要素を許容する。

ns|*

nsというネームスペースにおけるすべてのエレメント

*|*

すべてのエレメント

|*

宣言されたネームスペースを持たないすべてのエレメント

*

もしデフォルトのネームスペースが明示されていなければ、*|*と等しい。そうでなければ、nsデフォルトのネームスペースであるns|*と等しい。

注: 前もって宣言されていないネームスペースのプレフィックスを含む普遍的なセレクタは無効なセレクタである。ネームスペースのプレフィックスを宣言するための方法は、セレクタを実装する言語にゆだねられる。CSSの場合においては、その方法は一般的なシンタックスのモジュールの中で定義される。

6.3 アトリビュートのセレクタ

セレクタはエレメントのアトリビュートの表現を可能にする。

6.3.1 アトリビュートの存在と値のセレクタ

CSS2は四つのアトリビュートのセレクタを導入した。

[att]

どんなアトリビュートの値であっても、attというアトリビュートを表す。

[att=val]

値が厳密に"val"であるattというアトリビュートを表す。

[att~=val]

値がスペースで区切られた単語のリストであり、そのうちのひとつが厳密に"val"であるattというアトリビュートを表す。もしこのセレクタが用いられれば、(スペースによって区切られているから)値における単語はスペースを含んではならない。

[att|=val]

値が厳密に"val"であるか、"-"の直前に来る"val"で始まっているかのいずれかであるattというアトリビュートを表す。RFC3066([RFC3066])の中で説明されているように、言語のサブコードのマッチ(たとえば、HTMLの中でlinkというエレメントにおけるhreflangというアトリビュート)を主としてこれは可能にするつもりである。注:lang(あるいはxml:lang)の言語のサブコードのマッチのためには、:langという擬似クラスを見てください。

アトリビュートの値は、識別子か文字列でなければならない。セレクタにおけるアトリビュートの名前及び値の大文字・小文字の区別は文書言語に依存する。

h1[title]

span[class=example]

span[hello="Cleveland"][goodbye="Columbus"]

a[rel~="copyright"]
a[href="http://www.w3.org/"]

link[hreflang=fr]

link[hreflang|="en"]

DIALOGUE[character=romeo] 

DIALOGUE[character=juliet]

6.3.2 アトリビュートのセレクタにマッチする部分文字列

アトリビュートの値における部分文字列にマッチするのに三つの付加的なアトリビュートのセレクタが提供される。

[att^=val]

値が接頭辞"val"から始まるattというアトリビュートを表す

[att$=val]

値が接尾辞"val"で終わるattというアトリビュートを表す

[att*=val]

部分文字列"val"の少なくともひとつの事例を含むattというアトリビュートを表す

アトリビュートの値は、識別子か文字列でなければならない。セレクタにおけるアトリビュートの名前及び値の大文字・小文字の区別は文書言語に依存する。

例:

画像を参照している、HTMLのobjectを、以下に続くセレクタは表す。

object[type^="image/"]

値が".html"で終わるhrefというアトリビュートを持っている、HTMLのアンカーであるaを、以下に続くセレクタを表す。

a[href$=".html"]

値が部分文字列"hello"を含むtitleというアトリビュートを持っている、HTMLの段落を、以下に続くセレクタは表す。

p[title*="hello"] 

6.3.3 アトリビュートのセレクタとネームスペース

アトリビュートの名前に対する任意のネームスペースの構成要素をアトリビュートのセレクタは許容する。ネームスペースのプレフィックスは、ネームスペースのセパレータ"縦線"(|)によって区切られるアトリビュートの名前を、前もって宣言されているネームスペースのプレフィックスに加えてもよい。XMLの勧告におけるネームスペースに相応して、デフォルトのネームスペースはアトリビュートを提供しないから、したがって、宣言されているネームスペースを持たないアトリビュートにだけ、ネームスペースの構成要素を持たないアトリビュートのセレクタは適用される("|attr"と等しい)。アトリビュートのネームスペースにかかわらず、すべてのアトリビュートの名前と、アスタリスクはマッチする。

注 : 前もって定義されていないネームスペースのプレフィックスをアトリビュートの名前が含んでいるアトリビュートのセレクタは、無効なセレクタである。ネームスペースのプレフィックスを宣言するための方法は、セレクタを実装する言語にゆだねられる。CSSの場合においては、その方法は一般的なシンタックスのモジュールの中で定義される。

CSSの例:

@namespace foo "http://www.example.com";

[foo|att=val] { color: blue }

[*|att] { color: yellow }

[|att] { color: green }

[att] { color: green }

6.3.4 DTDにおけるデフォルトのアトリビュート

文書のツリーにおけるアトリビュートの値をアトリビュートのセレクタは明示的に表す。DTDおよびそのほかの場所でデフォルトのアトリビュートの値は定義されている。たとえデフォルトの値が文書のツリーにおいて含まれていなくても、セレクタは、動くように設計されるべきだ。

<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">

EXAMPLE[notation=decimal]
EXAMPLE[notation=octal]

EXAMPLE:not([notation])

6.4 クラスのセレクタ

HTMLで作業していると、classというアトリビュートを表すときに、~=の表記法の代わりとして、ピリオド(.)の表記法を著作者は用いてもよい。したがって、HTMLに対しては、div.valueおよびdiv[class~=value]は同じ意味を持っている。アトリビュートの値は"ピリオド"(.)の直後にこなければならない。注:それぞれのネームスペースのに対して、どのアトリビュートが"クラス"のアトリビュートであるか決定するのを可能にする、ネームスペースの明確な認識をUAが持っていれば、XMLの文書において、ピリオド(.)の表記法を用いるセレクタを適用してもよい。ひとつのその例として、個々のネームスペースに対する仕様書の中の本文によって、ネームスペースの明確な認識が与えられる。(たとえば、SVG 1.0[SVG]は、SVGの"クラス"のアトリビュートおよびUAが解釈すべき方法を説明し、同様に、MathML 1.01[MATH]は、MathMLの"クラス"のアトリビュートについて説明する。)

*.pastoral

.pastoral

h1.pastoral

p.pastoral.marine

p.marine.pastoral

6.5 IDのセレクタ

文書言語は、種類IDであると宣言されているアトリビュートを含むかもしれない。種類IDというアトリビュートが特別なのは、持っているエレメントの種類にかかわらず、そのようなアトリビュートが、二つとして文書の中で同じ値を持つことができないからである。どのような文書言語でも、IDに分類されたアトリビュートはエレメントをひとつに識別するために用いられる。HTMLにおいて、すべてのIDのアトリビュートは、"id"と名づけられる。XMLのアプリケーションは、IDのアトリビュートを違った風に名づけてもよいが、同じ制約が適用される。

文書言語の、IDに分類されるアトリビュートは、文書のツリーの中でひとつのエレメントの事例に、ある識別子を割り当てることを可能にする。その識別子に基づいたエレメントの事例を、W3CのIDのセレクタは表現する。a "番号の記号"(#)と直後に来るIDの値をIDのセレクタは含む。

h1#chapter1

#chapter1

*#z98y

6.6 擬似クラス

文書のツリーの中にないか、あるいは、ほかの単純なセレクタを用いては表現できない情報に基づいた選択を可能にするために、擬似クラスの構想が導入される。

"コロン"(:)と、その直後に来る擬似クラスの名前、および任意の丸括弧の間の値を、擬似クラスは常に含む。

セレクタに含まれる単純なセレクタのすべての連続の中で擬似クラスは許容される。先行する、種類のセレクタ、または普遍的なセレクタ(省略されるかもしれない)の後の、単純なセレクタの連続のどこにでも擬似クラスは許容される。擬似クラスの名前は大文字・小文字の区別がある。擬似クラスの中には相互に排他的なものもあれば、同じエレメントに同時に適用できるものもある。擬似クラスは動的であってもよい。つまり、使用者が文書とやりとりするときに、エレメントが擬似クラスを取得したり失ったりしてもよい。

6.6.1 動的な擬似クラス

原則として文書のツリーから導き出せない特質である、名前、アトリビュートまたは内容とは別の特質に関するエレメントを、動的な擬似クラスは分類する。

動的な擬似クラスは、文書のソースまたは文書のツリーの中には現れない。

リンクの擬似クラス: :linkおよび:visited

通例、以前に訪れたリンクと違った風に、ユーザエージェントは未訪問のリンクを表示する。これを識別するために、擬似クラス:linkおよび:visitedをセレクタは提供する。

• :linkという擬似クラスは、まだ訪れていないリンクに対して適用される。
• 使用者が一度でも訪れると、:visitedという擬似クラスが適用される。

二つの状態は互いに排他的である。

a.external:visited

使用者の行為の擬似クラス:hover、:active、および:focus

対話的なユーザエージェントは、時々使用者の行為に応じて描写を変える。使用者が行為を行うエレメントの選択のために、セレクタは三つの擬似クラスを提供する。

• :hoverという擬似クラスは、(ポインティングデバイスで)ユーザがエレメントを指し示しているがアクティブにはしていない間に適用される。たとえば、エレメントによって生成された枠の上にカーソル(マウスポインタ)があるとき、視覚のユーザエージェントは擬似クラスを適用することができるだろう。対話的な媒体をサポートしないユーザエージェントは、この擬似クラスをサポートしなくてもよい。対話的な媒体をサポートする適合するユーザエージェントの中には、この擬似クラスをサポートできないものもあるかもしれない(たとえば、ペンデバイス)。
• :activeという擬似クラスは、使用者によってアクティブにされている間に適用される。たとえば、使用者がマウスボタンを押して離す間である。
• :focusという擬似クラスは、エレメントがフォーカスを持っている(キーボードまたはマウスイベント、あるいはほかの入力形態を受け入れる)間に適用される。

どのエレメントが:activeになり、あるいは:focusを得ることができるのかに関して、文書言語または実装特定の制限があってもよい。

これらの擬似クラスは互いに排他的ではない。エレメントは同時にそのうちの数個にマッチするかもしれない。

a:link    /* 未訪問のリンク     */
a:visited /* 訪問したリンク     */
a:hover   /* 使用者のホバー     */
a:active  /* アクティブなリンク */

a:focus
a:focus:hover

6.6.2 ターゲットの擬似クラス:target

URIの中には、リソースの中の場所を参照するものがある。"番号の記号"(#)と、その次に続くアンカーの識別子で、この種類のURIは終わる。

ターゲットエレメントとして知られている、文書の中のあるエレメントへ、部分の識別子を持っているURIはリンクする。たとえば、HTMLの文書の中でsection_2と名づけられたアンカーをさしているURIがここにある。

http://example.com/html/top.html#section_2

:targetという擬似クラスによってターゲットエレメントは表される。

p.note:target

は、参照しているURIのターゲットエレメントである、クラスnoteのpを表す。

*:target { color : red }

*:target::before { content : url(target.png) }

6.6.3 言語の擬似クラス:lang

もしエレメントの人間の言語が決定される方法を文書の言語が明示していれば、その言語に基礎付けられたエレメントを表すセレクタを書くことが可能である。たとえば、HTML[HTML4.01]の場合においては、langというアトリビュート、metaというエレメントの組み合わせと、時には(HTTPヘッダのような)プロトコルからの情報によって、言語が決定される。xml:langと呼ばれるアトリビュートをXMLは用い、また、言語を決定するために、ほかの文書言語に特定の方法があってもよい。

擬似クラス:lang(C)は、言語Cにおけるエレメントを表す。ここでCはHTML 4.01[HTML4.01]およびRFC 3066[RFC3066]で明示されているような言語のコードである。

html:lang(fr-be)
html:lang(de)
:lang(fr-be) > q
:lang(de) > q

6.6.4 UIのエレメントの状態の擬似クラス

:enabledおよび:disabledという擬似クラス

:enabledという擬似クラスの目的は、あるやり方(たとえば、マウスでボタン上でクリックする)において選択する/アクティブにすることができるユーザインタフェースのエレメントで、有効にされたエレメントを著作者がカスタマイズするのを可能にするというものである。無効であるときどのように見えるかを明示することなく、たとえば、有効なinputというエレメントのデフォルトの外観だけ、プログラムで明示する方法がないから、このような擬似クラスの必要がある。

:enabledと同様に、無効であるかアクティブでないユーザインタフェースのエレメントを著作者が明示することを:disabledは可能にする。

ほとんどのエレメントは有効でも無効でもないことに注意すべきである。使用者がアクティブにするか、あるいはフォーカスを移すことができれば、エレメントは有効である。もし、有効にできるはずであるのに、現在のところ、使用者がアクティブにするか、あるいはフォーカスを移したりできなければ、エレメントは無効である。

:checkedという擬似クラス

ラジオおよびチェックボックスのエレメントは、使用者によって切り替えることができる。メニューの項目の中には、使用者が選択すると"チェック"がつくものがある。そのようなエレメントが"オン"に切り替えられると、:checkedという擬似クラスが適用される。HTML4のセクション17.2.1の中で説明されているような、HTML4のselectedというアトリビュートをもっているエレメントに対しては、:checkedという擬似クラスは最初から適用されるが、もちろん使用者はそのようなエレメントを"オフ"に切り替えることができ、そのような場合においては、:checkedという擬似クラスはもはや適用されない。:checkedという擬似クラスが本質的に動的であり、使用者によって変更されるが、セマンティックHTML4のselectedというアトリビュートの存在にも基礎付けられるから、すべての媒体に適用される。

:indeterminateという擬似クラス

ラジオおよびチェックボックスのエレメントは、使用者によって切り替えられるが、時に、チェックされてはいないし、チェックされていないわけでもない、不確定の状態にあることもある。これは、エレメントのアトリビュート、またはDOMの取り扱いによってなりうる。:indeterminateという擬似クラスはそのようなエレメントに適用される。:indeterminateという擬似クラスは本質的に動的であり、使用者によって変更されるが、エレメントのアトリビュートの存在にも基礎付けられるから、すべての媒体に適用される。

あらかじめ選択されていないラジオグループの構成要素は、:indeterminateの状態のひとつの事例である。

6.6.5 構造上の擬似クラス

文書のツリーの中にあるが、ほかの単純なセレクタまたは結合子によって表現できない特別な情報に基づいた選択を可能にするために、構造上の擬似クラスの構想をセレクタは導入する。

自分の親の子のリストの中で、エレメントの位置を算定するときに、スタンドアロンのPCDATAは数えられないことに注意せよ。親の子のリストの中で、エレメントの位置を計算するとき、インデックスの番号付けは1から始まる。

:rootという擬似クラス

文書のルートであるエレメントを:rootという擬似クラスは現す。HTML4の場合においては、これはHTMLというエレメントである。XMLの場合においては、XMLの文書に対する、DTD、またはスキーマおよびネームスペースに適切であれば、何でもよい。

:nth-child()という擬似クラス

:nth-child(an+b)という擬似クラスの表記法は、nに与えられる正の整数または0の値に対して、文書のツリーの中で、自分の前にan+b-1個の兄弟を持っているエレメントを表す。言い換えれば、それぞれa個のエレメントのグループにすべての子が分割させられた後、エレメントのb番目の子にこれはマッチする。これは、たとえば、表の中のひとつおきの横の列をセレクタが扱うことを可能にし、たとえば、段落のテキストの色を4段落の周期で交互にするために使われる。aおよびbは、0、負の整数、または正の整数でなければならない。エレメントの最初の子のインデックスは、1である。

これに加えて、'odd'および'even'を引数に対して:nth-child()はとることができる。'odd'は2n+1と同じ語意を持ち、'even'は2nと同じ語意を持っている。

tr:nth-child(2n+1) /* HTMLの表のすべての奇数の横の列を表す */
tr:nth-child(odd)  /* 同じ */
tr:nth-child(2n)   /* HTMLの表のすべての偶数の横の列を表す */
tr:nth-child(even) /* 同じ */

/* CSSにおける交互の段落の色 */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }

a=0のときは、繰り返しは用いられないから、たとえば、:nth-child(0n+5)は五番目の子だけにマッチする。a=0のときは、aの部分が含まれる必要がないから、シンタックスは:nth-child(b)に簡略化され、最後の例は:nth-child(5)に簡略化される。

foo:nth-child(0n+1)   /* 親のエレメントの最初の子である、エレメントfooを表す */
foo:nth-child(1)      /* 同じ */

a=1のとき、数字が規則から省かれてもよいから、以下に続く例は同等である。

bar:nth-child(1n+0)   /* すべてのbarというエレメントを表す。特殊性(0,1,1) */
bar:nth-child(n+0)    /* 同じ */
bar:nth-child(n)      /* 同じ */
bar                   /* 同じだがより低い特殊性(0,0,1) */

b=0であれば、すべてのa番目のエレメントが選び取られる。

tr:nth-child(2n) /* HTMLの表のすべての偶数の横の列を表す */

文書のaもbも両方とも0と等しければ、擬似クラスは文書のツリーにおいてエレメントをひとつも表さない。

値aは負でもよいが、もちろん、n>=0に対するa+bの正の値だけが、文書のツリーの中のエレメントを表す。

html|tr:nth-child(-n+6)  /* XHTMLの表の最初の6つの横の列を表す */

:nth-last-child()という擬似クラス

:nth-last-child(an+b)という擬似クラスの表記法は、nに与えられる正の整数または0の値に対して、文書のツリーの中で、自分の後にan+b+1個の兄弟を持っているエレメントを表す。この引数のシンタックスについては、:nth-child()という擬似クラスを見よ。また、引数に対して'even'および'odd'という値も受け入れる。

tr:nth-last-child(-n+2)    /* HTMLの表の最後の二つの横の列を表す */

foo:nth-last-child(odd)    /* 親のエレメントの中のすべての奇数のfooというエレメント。
                              最後のものから数える */

:nth-of-type()という擬似クラス

:nth-of-type(an+b)という擬似クラスは、nに与えられる0または正の整数の値に対して、文書のツリーの中で、自分の前に同じエレメントの名前を持っているan+b-1個の兄弟があるエレメントを表す。言い換えれば、その種類のすべての子がそれぞれのa個のエレメントのグループに分割された後、その種類のb番目の子にこれはマッチする。この引数のシンタックスについては、:nth-child()という擬似クラスを見よ。また、引数に対して'even'および'odd'という値も受け入れる。

img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }

:nth-last-of-type()という擬似クラス

:nth-last-of-type(an+b)という擬似クラスの表記法は、nに与えられる0または正の整数の値に対して、文書のツリーの中で、自分の後に同じエレメントの名前を持っているan+b+1個の兄弟を持っているエレメントを表す。この引数のシンタックスについては、:nth-child()という擬似クラスを見よ。また、引数に対して'even'および'odd'という値も受け入れる。

body > h2:nth-of-type(n+2):nth-last-of-type(n+2)

body > h2:not(:first-of-type):not(:last-of-type) 

:first-childという擬似クラス

:nth-child(1)と同じ。あるほかのエレメントの最初の子であるエレメントを:first-childという擬似クラスを表す。

div > p:first-child

<p> noteの前の最後のP。</p>
<div class="note">
   <p> noteの中の最初のP。</p>
</div>

<p> noteの前の最後のP。</p>
<div class="note">
   <h2>メモ</h2>
   <p> noteの中の最初のP。</p>
</div>

* > a:first-child   /* aはすべてのエレメントの最初の子である */
a:first-child       /* 同じ */

:last-childという擬似クラス

:nth-last-child(1)と同じ。あるほかのエレメントの最後の子であるエレメントを、:last-childという擬似クラスは表す。

順序付けられたリストolの最後の子であるリストの項目liを以下に続くセレクタは表す。

ol > li:last-child

:first-of-typeという擬似クラス

:nth-of-type(1)と同じ。自分の親のエレメントの子のリストの中で、自分の種類の最初の兄弟であるエレメントを:first-of-typeという擬似クラスは表す。

dl dt:first-of-type

<dl><dt>gigogne</dt>
        <dd><dl><dt>fus&eacute;e</dt>
                    <dd>多段式のロケット</dd>
                <dt>table</dt>
                    <dd>表のネスト</dd>
            </dl></dd>
</dl>

:last-of-typeという擬似クラス

:nth-last-of-type(1)と同じ。自分の親のエレメントの子供のリストの中で、自分の種類の兄弟であるエレメントを、:last-of-typeという擬似クラスは表す。

tr > td:last-of-type

:only-childという擬似クラス

兄弟をひとつも持たないエレメントを表す。:first-child:last-child または:nth-child(1):nth-last-child(1)と同じであるが、低い特殊性を持つ。

:only-of-typeという擬似クラス

同じエレメントの名前を持っている兄弟が一つもないエレメントを表す。:first-of-type:last-of-typeまたは:nth-of-type(1):nth-last-of-type(1)と同じであるが、低い特殊性を持つ。

:emptyという擬似クラス

、子をひとつも持たないエレメントを:emptyという擬似クラスは表す。DOMの観点から、時によっては空のテキストのノードを含む。

<p></p>

<foo>bar</foo>

<foo><bar>bla</bar></foo>

<foo>これは<bar>:empty</bar>ではない</foo>

6.6.6 内容の擬似クラス

テキストの内容が与えられた部分文字列を含むエレメントを、:contains("foo")という擬似クラスは表す。この擬似クラスの引数は、(二重引用符に囲まれた)文字列またはキーワードである。

内容の擬似クラスの使用は、静的なメディアタイプ([CSS2]を見よ)に限定される。

すべてのエレメントおよびサブエレメントの中に含まれる、すべてのPCDATAの連続によって、与えられたエレメントのテキストの内容は、決定される。

p:contains("Markup")

<p><strong>H</strong>yper<strong>t</strong>ext
   <strong>M</strong><em>arkup</em>
   <strong>L</strong>anguage</p>

Unicodeの文字およびキャリッジリターンについては、エスケープの仕組みを用いて、内容の擬似クラスの引数の中に特別な文字を挿入できる。

警告: リスト<ul><li>... the greek letter chi</li><li>effective</li></ul>にセレクタul:contains("chief")はマッチしてしまう。

P:contains("Markup") { background-color : red }

6.6.7 打消しの擬似クラス

打消しの擬似クラスは、引数として(打消しの擬似クラス自体及び擬似エレメントを除いて)単純なセレクタをとる、関数表記である。

button:not([DISABLED])

*:not(FOO)

html|*:not(:link):not(:visited)

注: :not()という擬似は、無駄なセレクタを書くことを可能にする。たとえば、エレメントを一つも表さない:not(*|*)、あるいは高い特殊性を持つがfooと同じfoo:not(bar)。

7. 擬似エレメント

文書言語によって明示されたものの範囲を超えて、文書ツリーに関する抽象概念を擬似エレメントは生成する。たとえば、エレメントの内容の最初の文字、あるいは最初の行にアクセスする仕組みを、文書言語は提供しない。擬似クラスはこのアクセスできない情報を設計者が参照するのを可能にする。また、擬似クラスはソースの文書の中に存在しない内容を参照する方法も設計者に提供するかもしれない(たとえば、::beforeおよび::afterという擬似クラスは生成された内容へのアクセスを与える)。

擬似エレメントは、二つのコロン(::)とその次に続く擬似エレメントの名前からなる。

注: 擬似クラスと擬似エレメントの間の区別を重んじるために、当文書によってこの::という表記法は導入される。また、既存のスタイルシートとの互換性のために、CSSの水準1および2で導入された擬似エレメントに対する以前の一コロンの表記法も、ユーザエージェントは受け入れなければならない。CSSの水準3において導入される新しい擬似エレメントに対しては、この互換性は許容されない。

セレクタの実体を表す単純なセレクタの連続の中で、擬似エレメントはただ一度だけ現れてよい。

7.1 ::first-lineという擬似エレメント

エレメントで最初にフォーマットされる行を::first-lineという擬似エレメントは記述する。

たとえば、CSSにおいて

p::first-line { text-transform: uppercase }

"すべての段落の最初の行の文字を大文字に変えよ"ということを、上の規則は意味する。しかしながら、実際のHTMLのエレメントには、セレクタp::first-lineはマッチしない。適合するユーザエージェントがすべての段落の始まりに挿入する擬似エレメントに、これはマッチする。

ページの幅、フォントのサイズなどを含めて、最初の行の長さがいくつかの要因に左右されることに注意せよ。したがって、

<p>This is a somewhat long HTML
paragraph that will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</p>

のような、もし上のスタイルの規則が適用されれば行が次のとおり描写される普通のHTMLの段落は、

THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. The first
line will be identified by a fictional tag
sequence. The other lines will be treated as
ordinary lines in the paragraph.

::first-lineのための架空のタグの一続きを含むため、ユーザエージェントによって"書き換え"られるかもしれない。どのようにプロパティが継承されるかを示すのに、架空のタグの一続きは役立つ。

<p><p::first-line> This is a somewhat long HTML
paragraph that</p::first-line> will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</p>

擬似エレメントが実際のエレメントを分割するときは、架空のタグの一続きを閉じ、それから開きなおすことによって、望ましい効果を記述できる。だから、spanというエレメントのある前の段落をマークアップすれば、

<p><span class="test"> This is a somewhat</span> long HTML
paragraph that will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</p>

::first-lineのための架空のタグの一続きに対して、適当な始まりと終わりのタグを、ユーザエージェントは生成することができるだろう。 the user agent could generate the appropriate start and end tags for the fictional tag sequence for ::first-line.

<p><span class="test"><p::first-line> This is a
somewhat</p::first-line></span><p::first-line>
long HTML paragraph that</p::first-line> will be broken into
several lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</p>

::first-lineという擬似エレメントは、ブロック水準のエレメントにだけ加えることができる。

::first-lineという擬似エレメントは、インライン水準のエレメントと類似しているが、使用法に左右され、一定の制約がある。以下に続くプロパティだけが::first-lineという擬似エレメントに適用される。フォントのプロパティ、色のプロパティ、背景のプロパティ、'word-spacing'、'letter-spacing'、'text-decoration'、'vertical-align'、'text-transform'、'line-height'、'text-shadow'および'clear'。

7.2 ::first-letterという擬似エレメント

エレメントで最初にフォーマットされる文字を::first-letterという擬似エレメントは記述する。

::first-letterという擬似エレメントは、すべてのエレメントに加えることができる。

よくある印刷上の効果である、"イニシャルキャップ"および"ドロップキャップ"のために、::first-letterという擬似クラスは用いられるかもしれない。もしその'float'というプロパティが'none'ならば、この種類の最初の文字はインライン水準のエレメントと類似しているが、使用法に左右され、一定の制約を持っている。ほかの状態では、これは浮動させられるエレメントと類似している。

これらは::first-letterに適用されるCSSのプロパティである。フォントのプロパティ、色のプロパティ、背景のプロパティ、'text-decoration'、'vertical-align'('float'が'none'のときのみ)、'text-transform'、'line-height'、マージンのプロパティ、パディングのプロパティ、ボーダーのプロパティ、'float'、'text-shadow'および'clear'。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>ドロップキャップの最初の文字</TITLE>
<STYLE type="text/css">
P               { font-size: 12pt; line-height: 12pt }
   P::first-letter { font-size: 200%; font-style: italic;
                     font-weight: bold; float: left }
   SPAN            { text-transform: uppercase }
  </STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article
    in The Economist.</P>
</BODY>
</HTML>

<P>
<SPAN>
<P::first-letter>
T
</P::first-letter>he first
</SPAN>
few words of an article in the Economist.
</P>

慣例であるドロップキャップのフォーマットを実現するために、ユーザエージェントは、フォントサイズを、たとえば、整列の基準線に近づけてもよい。また、フォーマットするときに標識のアウトラインを斟酌してもよい。

最初の文字に先行する括弧(たとえば、"開く"(Ps)、"閉じる"(Pe)および"その他"(Po)の括弧の種類の中で、Unicode[UNICODE]において定義されている文字)は、

のように含まれるべきだ。

::first-letterという擬似エレメントはエレメントの一部だけにマッチする。

言語の中には、ある文字の組み合わせを扱う方法について、特定の規則をもつものがある。たとえば、オランダ語において文字結合"ij"が単語の最初に現れれば、::first-letterという擬似エレメントの中に両方の文字があると考えられるべきである。エレメントの始まりから、開き括弧でない最初の文字群まで、::first-letterという擬似クラスは選択するべきだ。

P { color: red; font-size: 12pt }
P::first-letter { color: green; font-size: 200% }
P::first-line { color: blue }

<P>二行で終わる、あるテキスト</P>

<P>
<P::first-line>
<P::first-letter>
S
</P::first-letter>ome text that
</P::first-line>
ends up on two lines
</P>

7.3 UIのエレメントの断片の擬似エレメント

::selectionという擬似エレメント

::selectionという擬似エレメントは、ユーザによって強調されている、文書の部分に適用される。また、たとえば編集できる欄の中にある選択されたテキストにも、これは適用される。(以前は:selectedと名づけられていた):checkedという擬似クラスと、この擬似クラスは混同されるべきではない。

::selectionという擬似エレメントは本質的に動的で、使用者の行為によって変更されるが、はじめは(画面のような)動的な媒体に描写されていた静的な媒体(印刷されたページのようなもの、[CSS2]を見よ)にUAが描写するとき、UAが、現在の::selectionの状態をほかの媒体に移し、同様に適切な整形および描写が同様に効果を生じさせることを期待するのは正当である。

これが::selectionという擬似エレメントに適用されるプロパティである。色、カーソル、背景、輪郭。::selection上の'background-image'というプロパティの計算された値は、無視されてもよい。

7.4 ::beforeおよび::afterという擬似エレメント

エレメントの内容の前あるいは後に生成される内容を描写するために、::beforeおよび::afterという擬似エレメントが用いられる。生成された内容/マーカーというCSS3のモジュールの中で説明される。

::first-letterおよび::first-lineという擬似エレメントが::beforeおよび::afterと組み合わせられると、挿入されたテキストを含んでいるエレメントの最初の文字または行に適用される。

8. 結合子

8.1 子孫の結合子

作者は、文書のツリーの中の別のエレメントの子孫であるエレメント(たとえば、"H1というエレメントの中に含まれるEMというエレメント")をセレクタに記述してもらいたいと、思うことがあるかもしれない。子孫の結合子はそのような関係を表現する。子孫の結合子は、単純なセレクタの二つの連続を隔てている空白である。形式"A B"のセレクタは、ある祖先のエレメントAの任意の子孫であるエレメントBを表す。

h1 em

<h1>この<span class="myclass">見出しは<em>とても</em>重要である。</span></h1>

div * p

div p *[href]

8.2 子の結合子

子の結合子は二つのエレメントの親子関係を記述する。子の結合子は"大なり記号"(>)の文字でなっていて、単純なセレクタの二つの連続を区切る。

body > p

div ol>li p

8.3 隣接する兄弟の結合子

二つの異なる隣接する兄弟の結合子がある。直接隣接の結合子および間接隣接の結合子。

8.3.1 直接隣接の結合子

直接隣接の結合子は、単純なセレクタの二つの連続を区切る"プラス記号"(+)の文字でなっている。二つの連続によって表されるエレメントは、文書のツリーの中で同じ親を共有し、最初の連続によって表されたエレメントは、二番目のものによって表されるエレメントの直前に来る。

math + p

h1.opener + h2

8.3.2 間接隣接の結合子

間接隣接の結合子は、単純なセレクタの二つの連続を区切る"チルダ"(~)の文字でなっている。二つの連続によって表されたエレメントは、文書のツリーの中で同じ親を共有し、最初の連続のよって表されたエレメントは、二番目のものによって表されるエレメントの前に来る(必ずしも直前に来なくてよい)。

h1 ~ pre

<h1>関数aの定義</h1>
<p>関数a(x)は表の中のすべての数字に適用される。</p>
<pre>function a(x) = 12x/13.5</pre>

9. セレクタの特殊性の計算

セレクタの特殊性は以下のように計算される。

• 打消しのセレクタは、その単純なセレクタの引数と同様に数えられる
• セレクタの中のIDのアトリビュートの数を数える(= a)
• セレクタの中のほかのアトリビュートや擬似クラスの数を数える(= b)
• セレクタの中のエレメントの名前の数を数える(= c)
• 擬似エレメントを無視する。

(大きな基数を持っている数の体系における)三つの数a-b-cを鎖状につなぐと、特殊性となる。

*               /* a=0 b=0 c=0 -> 特殊性 =   0 */
LI              /* a=0 b=0 c=1 -> 特殊性 =   1 */
UL LI           /* a=0 b=0 c=2 -> 特殊性 =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> 特殊性 =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> 特殊性 =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> 特殊性 =  13 */
LI.red.level    /* a=0 b=2 c=1 -> 特殊性 =  21 */
#x34y           /* a=1 b=0 c=0 -> 特殊性 = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> 特殊性 = 101 */

10. セレクタの文法

10.1 文法

下の文法は、セレクタのシンタックスを定義する。これは、全体的にはLL(1)であり、部分的にはLL(2)になりうる(が、文を解析する決まりを表現していないから、ほとんどのUAは直接用いるべきではない)。提示のフォーマットは人間の使用のために能率的に利用され、Yacc([YACC]を見よ)の範囲を超えた簡略表記法が用いられる。

• *: 0以上
• +: 1以上
• ?: 0または1
• |: 選択できるものを区切る
• [ ]: グルーピング

提出は、

selectors_group
  : selector [ ',' S* selector ]*
  ;

selector
  /* there is at least one sequence of simple selectors in a */
  /* selector and the pseudo-elements occur only in the last */
  /* sequence ; only pseudo-element may occur */
  : [ simple_selector_sequence combinator ]*
       simple_selector_sequence [ pseudo_element ]?
  ;

combinator
  /* combinators can be surrounded by white space */
  : S* [ '+' | '>' | '~' | /* empty */ ] S*
  ;

simple_selector_sequence
  /* the universal selector is optional */
  : [ type_selector | universal ]?
        [ HASH | class | attrib | pseudo_class | negation ]+ |
    type_selector | universal
  ;

type_selector
  : [ namespace_prefix ]? element_name
  ;

namespace_prefix
  : [ IDENT | '*' ]? '|'
  ;

element_name
  : IDENT
  ;

universal
  : [ namespace_prefix ]? '*'
  ;

class
  : '.' IDENT
  ;

attrib
  : '[' S* [ namespace_prefix ]? IDENT S*
        [ [ PREFIXMATCH |
            SUFFIXMATCH |
            SUBSTRINGMATCH |
            '=' |
            INCLUDES |
            DASHMATCH ] S* [ IDENT | STRING ] S*
        ]? ']'
  ;

pseudo_class
  /* a pseudo-class is an ident, or a function taking an */
  /* ident or a string or a number or a simple selector  */
  /* (excluding negation and pseudo-elements) */
  /* or a an+b expression for argument */
  : ':' [ IDENT | functional_pseudo ]
  ;

functional_pseudo
  : FUNCTION S* [ IDENT | STRING | NUMBER |
                  expression | negation_arg ] S* ')'
  ;

expression
  :  [ [ '-' | INTEGER ]? 'n' [ SIGNED_INTEGER ]? ] | INTEGER
  ;

negation_arg
  : type_selector | universal | HASH | class | attrib | pseudo_class
  ;

pseudo_element
  : [ ':' ]? ':' IDENT
  ;

である。

10.2 語彙の走査機構

下記は、Flex( [FLEX]を見よ)の表記法で書かれたトークン化子である。トークン化子は大文字・小文字の区別がない。

二度出現する"\377"は、Flexの現在のバージョンが扱うことのできる最大の数(十進法の255)を表す。Unicode/ISO-10646の最大限のコードのポイントである"\4177777"として読まれるべきだ。

%option case-insensitive

h                       [0-9a-f]
nonascii                [\200-\377]
unicode                 \\{h}{1,6}[ \t\r\n\f]?
escape                  {unicode}|\\[ -~\200-\377]
nmstart                 [a-z_]|{nonascii}|{escape}
nmchar                  [a-z0-9-_]|{nonascii}|{escape}
string1                 \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2                 \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'

ident                   {nmstart}{nmchar}*
name                    {nmchar}+
integer                 [-]?[0-9]+
signed_integer          [-+][0-9]+
num                     {integer}|[0-9]*"."[0-9]+
string                  {string1}|{string2}
nl                      \n|\r\n|\r|\f
%%

[ \t\r\n\f]+    {return S;}

\/\*[^*]*\*+([^/][^*]*\*+)*\/   /* ignore comments */

"~="                    {return INCLUDES;}
"|="                    {return DASHMATCH;}
"^="                    (return PREFIXMATCH;)
"$="                    (return SUFFIXMATCH;)
"*="                    (return SUBSTRINGMATCH;)
{string}                {return STRING;}
{ident}                 {return IDENT;}
{ident}"("              {return FUNCTION;}
{num}                   {return NUMBER;}
{signed_integer}        {return SIGNED_INTEGER;}
{integer]               {return INTEGER;}
"#"{name}               {return HASH;}

.                       {return *yytext;}

11. ネームスペースとダウンレベルクライアント

重大な問題点は、この文書より先に製作されたウェブクライアントにおける、XMLの文書とCSSのセレクタの相互の影響である。あいにく、ネームスペースのプレフィックスではなく、ネームスペースを識別するURIに基礎付けられてネームスペースがマッチされなければならないという事実のために、同様にURIによってCSSにおけるネームスペースを識別することが必要とされるものも、操作の手順の中にはある。そのような手順なしでは、XMLの文書のでたらめな一そろいに対して、すべての場合においてセレクタが正しくマッチするCSSのスタイルシートを作成することは、不可能である。しかしながら、スタイルシートが適用されることになるXMLの文書について完全な情報が与えられ、XMLの文書の中で制限されたネームスペースの使用が行われれば、セレクタが正しくエレメントとアトリビュートにマッチするスタイルシートを作成することは、可能である。

ネームスペースの修飾されたエレメントの種類またはアトリビュートのセレクタを使用するすべてのスタイルの規則と同様に、@namespaceというアット規則をダウンレベルのCSSのクライアントは(もしCSSの前方互換の解析規則に正しく従えば)無視する。CSSの中でネームスペースのプレフィックスの範囲を定めるシンタックスは、ダウンレベルのCSSのクライアントが、ことによると不正確にマッチするよりもむしろ、スタイルの規則を無視するように計画的に選ばれた。

ネームスペースの認識があるCSSのクライアントも、ダウンレベルクライアントも、両方とも機能を果たすエレメントの種類のセレクタを書くことを、CSSにおけるデフォルトのネームスペースの使用は可能にする。

次に続く事柄は、この提案を実装しないウェブクライアントにおいて、正しく機能を果たすスタイルシートを作成することが可能なシナリオと実例である。

1. XMLの文書がネームスペースを利用しない。
   • この場合においては、スタイルシートの中でネームスペースを宣言したり、あるりは使用したりすることは、明らかに必要でない。標準のCSSのエレメントの種類とアトリビュートのセレクタは、ダウンレベルクライアントにおいて適切に機能を果たす。
   • CSSのネームスペースの認識があるクライアントの場合においては、ネームスペースにかまわずにマッチする、エレメントのセレクタのデフォルトの振る舞いは、すべてのエレメントに対して正しく機能を果たす。しかしながら、ネームスペースがないエレメントだけにマッチする、明示されたエレメントの種類のセレクタ("|name")は、宣言されたネームスペースを持っていないXMLのエレメントだけにマッチすることを保証する。
2. XMLの文書が文書中で単一のデフォルトのネームスペースを定義する。ネームスペースのプレフィックスはエレメントの名前においてひとつも用いられない、
   • この場合においては、XMLの文書でネームスペースが少しも用いられていないかのように、ダウンレベルクライアントは機能を果たす。標準のCSSのエレメントの種類とアトリビュートのセレクタは、すべてのエレメントに対してマッチする。
3. XMLの文書はデフォルトのネームスペースを用いない。スタイルシートの著作者には、用いられるすべてのネームスペースのプレフィックスが知られていて、ネームスペースのプレフィックスとネームスペースのURIの間に、直接のマッピングがある。(XMLの文書中で、与えられたプレフィックスは、ひとつのネームスペースのURIにだけマップされてもよい。同じURIにマップされる複数のプレフィックスがあってもよい)。
   • この場合においては、種類のセレクタとネームスペースにおいて概説されたようなローカルの部分ではなく、完全な修飾された名前に基づいて、エレメントの種類とアトリビュートのセレクタを、ダウンレベルクライアントは、表示し、マッチする。完全な修飾された名前を記述するために、CSSのセレクタはエスケープされたコロン"\:"を用いて宣言できる。たとえば、"html\:h1"は<html:h1>にマッチする。完全な修飾された名前を用いているセレクタは、同じプレフィックスを用いているXMLのエレメントにだけマッチする。それに対して追加のCSSのスタイルの規則が宣言されなければ、同じURIにマップされる、XMLの中で用いられるほかのネームスペースのプレフィックスは、期待通りにマッチしない。
   • このやり方で定義されるセレクタはダウンレベルクライアントだけにマッチすることに注意せよ。CSSのネームスペースの認識があるクライアントは、名前のローカルの部分に基づいてエレメントの種類とアトリビュートのセレクタをマッチする。それで、完全な修飾された名前で宣言されたセレクタは、(完全な修飾された名前においてネームスペースのプレフィックスがある限り)マッチしない。

ほかのシナリオに関しては、XMLにおいて用いられるネームスペースのプレフィックスを、スタイルシートの作者があらかじめ知っていない、あるいは、デフォルトネームスペースを用いているエレメントとともに、ネームスペースを持っていないエレメントの組み合わせが用いられている、あるいは、同じ文書において、または異なる文書において、違ったネームスペースのURIに、同じネームスペースのプレフィックスがマップされているときは、その文書の中のすべてのエレメントに対して正しく機能を果たすCSSのスタイルシートを作成することは不可能である。ただし、(この文書や同様のものによって概説されているような)URIのシンタックスを用いてスタイルシートが書かれていて、CSSとXMLの認識のあるクライアントによって文書が処理されていれば話は別である。

12. プロフィール

セレクタを用いているそれぞれの仕様書は、許容また除外するW3Cのセレクタのサブセットを定義し、サブセットのすべての構成要素の局所的な意味を説明しなければならない。

規範的でない例:

h1 a[name]

13. 適合と必要条件

この項は現在の仕様書との適合だけを定義する。

個々のデバイスの制限のためにこの仕様書の一部をユーザエージェントが実装することができない(たとえば、対話的でないユーザエージェントは、おそらく、動的な擬似クラスを、対話なしでは意味を成さないから、実装しないだろう)ことは、不適合を意味しない。

セレクタを再利用するすべての仕様書は、それが容認し、除外するセレクタのサブセットを表にし、本仕様書に加える制限を説明するプロフィールを含まなければならない。

たとえば、認識されていないトークン、あるいは現在解析している箇所で許容されていないトークンのように、解析時にエラーがあると、無効になる。

解析時のエラーの扱いに関して、ユーザエージェントは規則を遵守しなければならない

• 宣言されていないネームスペースのプレフィックスを含んでいる単純なセレクタは、無効である
• 無効な単純なセレクタ、無効な結合子、または無効なトークンを含んでいるセレクタは、無効である。
• 無効なセレクタを含んでいるセレクタの群は、無効である。

[CWWW]によって定義されてたように、"テキストデータの受取人"としてこの仕様書の実装は振舞わなければならない。(特に、実装は、当然データが基準に合わせられている、と思わなければならず、それを基準にあわせることをしてはならない。)マッチングのための規範的な規則は、[CWWW]および[UNICODE]の中で定義され、この仕様書の実装に適用される。

14. テスト

仕様書の基本的な適合をユーザエージェントが実証することを可能にするテストスイートを、この仕様書は含む。テストスイートはあえて徹底的なものであろうとはせず、セレクタのすべての考えられる組み合わされた事例を含まない。

このテストは利用可能である[今後リンクが来よう]。

15. 謝意

この仕様書はカスケードを行うスタイルシートとフォーマットを行うプロパティに関するW3Cの策定団体の成果である。この仕様書の編集者に加えて、策定団体の会員は、

• Marc Attinasi (Netscape/AOL)
• Bert Bos (W3C)
• Tantek Çelik (Microsoft Corp.)
• Don Day (IBM)
• Martin Dürst (W3C)
• Angel Diaz (IBM)
• Daniel Glazman (Netscape/AOL from November 2000, and Electricité de France until February 2000)
• Håkon W. Lie (Opera Software from April 1999, and W3C until April 1999)
• Chris Lilley (W3C)
• Dave Raggett (W3C/Openwave Systems Inc.)
• Pierre Saslawsky (Netscape/AOL)
• Robert Stevahn (Hewlett-Packard)
• Michel Suignard (Microsoft Corp.)
• Ted Wugofski (Openwave Systems Inc.)
• Steve Zilles (Adobe)

のかたがたである。

策定団体に招待させていただいた多数の専門家は、著しくCSS3に貢献されている。L. David Baron、Tim Boland (NIST)、Todd Fahrner、Daniel Glazman、Ian Hickson、Eric Meyer (The OPAL Group)、Jeff Veen。

策定団体の以前の会員:

• Chris Brichford (Adobe)
• Troy Chevalier (Netscape/AOL)
• Dwayne Dicks (SoftQuad)
• Ian Jacobs (W3C)
• Lorin Jurow (Quark)
• Sho Kuwamoto (Macromedia)
• Peter Linss (Netscape/AOL)
• Steven Pemberton (CWI)
• Robert Pernett (Lotus)
• Douglas Rand (SGI)
• Nisheeth Ranjan (Netscape/AOL)
• Ed Tecot (Microsoft Corp.)
• Jared Sorensen (Novell)
• Mike Wexler (Adobe)
• John Williams (Quark)
• Chris Wilson (Microsoft Corp.)

このかたがた(会員、招待させていただいた専門家および前の会員)すべてに、その努力に対して感謝申し上げる。

もちろん、この文書はCSSの水準1およびCSSの水準2の勧告から出ている。すべてのCSS1およびCSS2の著作者、編集者、そして貢献者に感謝申し上げる。

策定団体がずっと複雑な解決策を考えているとき、Hasan Ali Çelik博士は:nth-child()に対して、引数の単純で、かつ力強いシンタックスを提案してくださった。

www-style@w3.org上の議論は、多数の重要な問題点に影響を及ぼしている。とりわけ、Ian Graham、David Baron、Björn Höhrmann、fantasai、Jelks CabanisおよびMatthew Brealeyに、その積極的で有用な関与に対して感謝申し上げる。

16. 参考文献

1. [CSS1] Bert Bos, Håkon Wium Lie; "Cascading Style Sheets, level 1", W3C Recommendation, 17 Dec 1996, revised 11 Jan 1999
   (http://www.w3.org/TR/REC-CSS1)
2. [CSS2] Bert Bos, Håkon Wium Lie, Chris Lilley, Ian Jacobs, editors; "Cascading Style Sheets, level 2", W3C Recommendation, 12 May 1998
   (http://www.w3.org/TR/REC-CSS2/)
3. [CWWW] Martin J. Dürst, François Yergeau, Misha Wolf, Asmus Freytag, Tex Texin, editors; "Character Model for the World Wide Web", W3C Working Draft, 26 January 2001
   (http://www.w3.org/TR/2001/WD-charmod-20010126)
4. [FLEX] "Flex: The Lexical Scanner Generator", Version 2.3.7, ISBN 1882114213
5. [HTML4.01] Dave Ragget, Arnaud Le Hors, Ian Jacobs, editors; "HTML 4.01 Specification", W3C Recommendation, 24 December 1999
   (http://www.w3.org/TR/html401/)
6. [MATH] Patrick Ion, Robert Miner; "Mathematical Markup Language (MathML) 1.01", W3C Recommendation, revision of 7 July 1999
   (http://www.w3.org/1999/07/REC-MathML-19990707)
   
7. [NMSP] Peter Linss, editor; "CSS Namespace Enhancements (Proposal)", W3C Working Draft, 25 June 1999
   (http://www.w3.org/1999/06/25/WD-css3-namespace-19990625/)
8. [RFC3066] H. Alvestrand; "Tags for the Identification of Languages", Request for Comments 3066, January 2001
   (http://www.ietf.org/rfc/rfc3066.txt)
9. [STTS3] Daniel Glazman ; "Simple Tree Transformation Sheets 3", Electricité de France, submission to the W3C, 11 Nov 1998
   (http://www.w3.org/TR/NOTE-STTS3)
10. [SVG] Jon Ferraiolo ed.; "Scalable Vector Graphics (SVG) 1.0 Specification", W3C Proposed Recommendation, 19 July 2001
    (http://www.w3.org/TR/2001/PR-SVG-20010719)
    
11. [UI] Tantek Çelik, editor; "User Interface for CSS3", W3C Working Draft, 16 February 2000
    (http://www.w3.org/TR/2000/WD-css3-userint-20000216)
12. [UNICODE] "The Unicode Standard: Version 3.0.1", The Unicode Consortium, Addison Wesley Longman, 2000, ISBN 0-201-61633-5.
    URL: http://www.unicode.org/unicode/standard/versions/Unicode3